css - CSS：悬停在“绝对”定位元素内

Question

我有一个朋友 mrOverAbsolute，他想坐在另一个朋友 mrAbsolute 的上面。似乎谁都没有抱怨。我有另一个朋友，他回复了想要使用精灵的“mrHover”。mrHover 只有在大狗、mrHover 和 mrOverHover 不是那么绝对时才会高兴。

下面是剧情：

<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>

好吧好吧-除了朋友-如果我删除“位置：绝对；”，精灵就可以了。否则，Chrome 会忽略我在 CSS 中声明了 ":hover" 的事实。

有什么建议么？

Answer 1

绝对定位的元素没有问题:hover。

问题是当你设置它#mrAbsolute的时候你把元素放在后面，所以鼠标事件被.#mrOverAbsolutez-index:-1#mrOverAbsolute