CSS: hovering in an "absolute" positioned element

I have a friend, mrOverAbsolute, who wants to sit on top of another friend, mrAbsolute. Nobody seems to be complaining. I have another friend who responds to "mrHover" who wants to use a sprite. mrHover is only happy when large dogs, mrHover and mrOverHover are not 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>

Good, good - friends aside - if I delete the "position: absolute", the sprite works. Otherwise, Chrome ignores the fact that I declared ": hover" in CSS.

Any suggestions?

+5
source share
1 answer

No problem with :hoverabsolutely positioned elements.

, #mrAbsolute #mrOverAbsolute, z-index:-1, #mrOverAbsolute.

+7

All Articles