奇怪：hover z-index 和 img 的错误

Question

I am having a very weird bug trying to highlight some parts of an image with overlays (higher z-index ) on :hover .我有一个非常奇怪的错误，试图在:hover上用叠加层（更高z-index ）突出显示图像的某些部分。 In Safari / Firefox / Chrome, no issue.在 Safari / Firefox / Chrome 中，没有问题。 But in IE (8 or 9), my simple CSS code doesn't work as it seem that IE doesn't trigger the :hover when the overlays are not always visible (no background-color or visibility:hidden )但在 IE（8 或 9）中，我的简单 CSS 代码不起作用，因为当叠加层并不总是可见时，IE 似乎不会触发:hover （没有background-color或visibility:hidden ）

Here is a MWE with the HTML and CSS:这是带有 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>

The code above works, but if you try to remove the background: #ccc or add visibility:hidden from/to the li styling, it stops working under IE (no more :hover effect).上面的代码有效，但如果您尝试删除background: #ccc或添加visibility:hidden from/to the li样式，它将在 IE 下停止工作（不再有:hover效果）。

The additional weird thing is that it does work (the :hover gets triggered) without background or with visibility:hidden on the li if the <img> line is removed.另一个奇怪的事情是，如果 < li <img>行被删除，它确实可以在没有background或visibility:hidden的情况下工作（触发:hover ）。 So it's not an issue of :hover not being possible on an element that's not visible in IE as one would think, and I've tried adding explicit z-index es everywhere without success...所以这不是:hover在 IE 中不可见的元素上不可能像人们想象的那样的问题，我已经尝试在任何地方添加显式z-index es 但没有成功......

Any idea of what's happening and how to solve it?知道发生了什么以及如何解决它吗？

Answer 1

Well, I solved it myself by setting a background and opacity:0 on the li (which for IE means filter: alpha(opacity:0)) .好吧，我通过在li上设置背景和opacity:0自己解决了这个问题（对于 IE 来说意味着filter: alpha(opacity:0)) 。 This way, the :hover gets triggered properly.这样， :hover就会被正确触发。

奇怪：hover z-index 和 img 的错误

问题描述

1 个解决方案

解决方案1
0 已采纳 2012-04-10 19:20:48

奇怪：hover z-index 和 img 的错误

问题描述

1 个解决方案

解决方案1 0 已采纳 2012-04-10 19:20:48

解决方案1
0 已采纳 2012-04-10 19:20:48