0

我遇到了一个非常奇怪的错误，试图突出显示带有叠加层（更高z-index）的图像的某些部分:hover。在 Safari / Firefox / Chrome 中，没问题。但是在 IE（8 或 9）中，我的简单 CSS 代码不起作用，因为:hover当覆盖层并不总是可见时（否background-color或visibility:hidden）似乎 IE 不会触发

这是一个带有 HTML 和 CSS 的 MWE：

<html>
<head>
  <style>
    .photo-notes {
      position: absolute;
      z-index: 998;
    }
    .photo-notes ul {
      position: relative;
    }
   .photo-notes li {
      list-style: none;
      position: absolute;
      background: #ccc;
      z-index: 999;
    }
    .photo-notes li:hover {
      background: red;
    }
    .photo-container {
      z-index: 1;
    }
  </style>
</head>
<body>
<div>
  <div class="photo-notes">
    <ul>
      <li style="left:  25px; top: 20px; width: 50px; height: 100px;"> </li>
    </ul>
  </div>
  <div class="photo-container">
    <img src="http://www.google.com/logos/2012/newyearsday-2012-hp.jpg"/>
  </div>
</div>
</body>
</html>

上面的代码有效，但是如果您尝试从样式中删除background: #ccc或添加样式，它将在 IE 下停止工作（不再起作用）。visibility:hiddenli:hover

另一个奇怪的事情是，如果行被删除，它确实可以工作（:hover被触发） 。因此，这不是一个在 IE 中不可见的元素上不可能的问题，正如人们所想的那样，我已经尝试在任何地方添加显式 es 但没有成功......backgroundvisibility:hiddenli<img>:hoverz-index

知道发生了什么以及如何解决它吗？

4

1 回答 1

0

好吧，我自己解决了这个问题，方法是设置背景和（opacity:0对于liIE 意味着filter: alpha(opacity:0))。这样，:hover正确触发。

于 2012-04-10T19:20:48.983 回答