奇怪的：带有 z-index 和 img 的悬停错误答案

【问题标题】：Weird :hover bug with z-index and img奇怪的：带有 z-index 和 img 的悬停错误
【发布时间】：2012-04-11 03:20:48
【问题描述】：

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

这是一个带有 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>

上面的代码可以工作，但是如果你尝试从li 样式中删除background: #ccc 或添加visibility:hidden，它会在IE 下停止工作（不再有:hover 效果）。

另外一个奇怪的事情是它确实工作（:hover 被触发）没有background 或li 上的visibility:hidden 如果<img> 行被删除。所以这不是:hover 不可能在 IE 中不可见的元素上的问题，正如人们所想的那样，我尝试在任何地方添加明确的z-indexes 却没有成功......

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

【问题讨论】：

标签： html css image hover z-index

【解决方案1】：

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

【讨论】：