Hi Franckie, You've done a great job with this 'hidden take-over' solution. Your explanation of this 'flash' phenomenon was very clear. Not only is my problem solved, but I also understand now what was causing it.
Thanks so much, (en groeten uit Holland :-) Dimpie ----- Original Message ----- From: "francky" <[EMAIL PROTECTED]> To: "dimpie" <[EMAIL PROTECTED]> Cc: <[email protected]> Sent: Thursday, October 26, 2006 8:23 AM Subject: Re: [css-d] Changing z-index with :hover -> screen starts flickering > dimpie wrote: > >>I need some help with the following problem. >> >>I have a div#main - with color lightblue - which should is and should be >>on top when the webpage loads. >>When I hover over it I want the div#menu - with color gold - to be on top. >> >>At first div#main has z-index 100. When I hover over div#main >>(div#main:hover) I change the z-index to 10. >> >>Div#menu has a z-index of 50. >> >>The problem is that the divs start fighting (= flickering) about who >>should be on top. >> >>This is the link: http://www.glassbox.nl/test/zindexproblem.htm. >> >>Thanks in advance. >> >>Dimpie. >> > Hi Dimpie, > In fact the page is doing exactly what you asked: > > * Hover over the #main > lower the z-index of the #main and show the > #menu. > * BUT ... if the #menu is shown, it is covering the #main. > * If the #main is covered, it is impossible to hover over it. :-) [1] > * So if you go on hovering (the pc is checking the hover status on > the fly), then the #main is loosing his focus / hovering status, > and goes back to his default, the z-index 100. > * And, FLASH, the #menu on level 50 is gone. > * BUT ... as soon as the #menu is gone, the #main is not covered. > * And if the #main is visible, and the mouse is still on the same > position, hovering over the #main, > * Then FLASH ... the #main is going down, an the #menu is coming up > again. > * .... as long as you can stand to hover over the flashing/fighting > area, > * .... or if you can freeze the mouse on the same pixel. ;-) > > The trick is to give the upper layer, the #menu, also the option to hover > over it. And if hovering over the #menu, it's z-index must get more than > the high-level of the #main background. Then there will be a hidden "take > over" of the hover by the second element. And if the mouse is loosing the > focus of the #menu AND the #main, the initial state is back: #main is > visible (and hoverable, to start again). > And ... theory is working: see testpage > <http://home.tiscali.nl/developerscorner/css-discuss/test-zindexproblem.htm>. > > Success and greetings, > (toedeloe) > francky > > [1] > Notice if you stay hovering in the #main area under the #menu area, there > is no flickering. > > btw-1: The ieupdate.js file isn't in the pointed folder, it's a 404; don't > know if thats important for something. > > btw-2: Browsers aren't impressed by huge z-index numbers. They only can > see: "is it more or is it less or is it equal?". The human idea "I give a > lot z-indexes more, then the browser will sure understand and do better > what I ask" doesn't have any influence on stupid machines. - So z-indexes > 1,2,3,4 can work as well as 10, 50, 100, 5000 (eh, in case there are empty > levels between). > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
