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/
