CSS :hover Within an 'absolute' Positioned Element [closed]

Question

I've got a friend, mrOverAbsolute, who wants to sit on top of another friend, mrAbsolute. Neither one seems to complain. I've got another friend, who responds to "mrHover" that wants to use a sprite. mrHover is only happy when the big dogs, mrHover and mrOverHover aren't so absolute.

Here's the drama:

<style>
div#mrOverAbsolute
{
  z-index:1;
  /* ... and some other stuff */
}
div#mrAbsolute
{
  position:absolute;
  z-index:-1;
  /* ... and some other stuff */
}
a.mrHover
{
  background:url('mrImage') 0 0;
}
a.mrHover:hover
{
  background-position:0 25;
}
</style>

<div id="mrOverAbsolute"></div>
<div id="mrAbsolute">
  <table>
    <tr>
      <td><a href="" class="mrHover"></a></td>
    </tr>
  </table>
</div>

Okay okay -- friends aside -- if I remove "position:absolute;", the sprite works. Otherwise, Chrome ignores the fact that I've declared a ":hover" in CSS.

Any suggestions?

Answer 1

There is no problem with :hover on absolutely positioned elements.

The problem is that you place the #mrAbsolute element behind the #mrOverAbsolute when you set its z-index:-1 so the mouse events are intercepted by #mrOverAbsolute.