CSS :hover bug

The idea is to have an image which will show a tooltip when 'hotspots' are moused over, using the CSS :hover trick found in menus in many sites nowadays. In its simplest form, the markup would look like this:

<div class="rel wrapper">
   <img src="./moz.gif"
        alt="test image" />
   <div class="abs"
        id="rollover"></div>
   <div class="abs"
        id="tooltip">this is a tooltip</div>
</div>

where class="rel" defines position: relative, class="abs" defines position: absolute and class="wrapper" centers the DIV.

The relevant CSS rules are as follows:

#rollover + div
{
   visibility: hidden;
}

#rollover:hover + div
{
   visibility: visible;
}

A little CSS applied for clarity gives the wrapper a green background color and a bottom margin so the rollover hotspots overlap, and the hotspots themselves a thick yellow border.

View this page in Firefox, mouse over either of the hotspots and the result is as expected: the tooltip appears as long as the mouse is over or within the borders of the hotspot.

View the page in Opera, and things start to go awry: as soon as the mouse hovers over the image, the tooltip disappears, but hover over the border and the tooltip reappears.

MSIE shows the same behaviour: the tooltip disappears when hovering over the image and returns when leaving the image or hovering over any border.

Safari is the worst offender here: the whole hover mechanism doesn't work at all.

test image
this is the tooltip

As it turns out, Safari's aberant behaviour can be relatively easily cured. It might not supprt :hover on siblings but it does support it on parent–child relationships like so:

<div class="rel wrapper">
   <img src="./moz.gif"
        alt="test image" />
   <div class="abs"
        id="rollover">
      <div class="abs"
           id="tooltip">this is the tooltip</div>
   </div>
</div>

Where the relevant CSS rules would be as follows:

#rollover > div
{
   visibility: hidden;
}

#rollover:hover > div
{
   visibility: visible;
}

This results in rather convoluted markup but now Safari also does what is expected from it. Opera and MSIE, however, still refuse to co–operate fully; worse, in MSIE a new quirk rears its ugly head: when hovering over the rollover but outside the wrapper, the tooltip disappears again.

test image
this is the tooltip

Since hovering over the border has the desired effect in both situations in the two deficient browsers, it appears that the rollover DIV's being empty is the culprit. And indeed, if the rollover DIV is given a background image [in this case a semi–transparent GIF for demonstration purposes, in real life situations it could be any image, not necessarily transparent] the construction works in all four browsers.

test image
this is the tooltip

The relevant CSS rule look like this:

#rollover
{
   background: url("./resources/halftrans.gif");
}

#rollover > div
{
   visibility: hidden;
}

#rollover:hover > div
{
   visibility: visible;
}

Here are both siblings and nested DIVs with and without background images side by side:

siblings
test image
this is tooltip 1
this is tooltip 2
nested
test image
this is tooltip 1
this is tooltip 2

NB: for purposes of simplification the CSS rules quoted in the text of this document differ from those included in the HEAD section of same but the net result is the same.