奇怪：hover z-index 和 img 的錯誤

Question

我有一個非常奇怪的錯誤，試圖在: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>

上面的代碼有效，但如果您嘗試刪除background: #ccc或添加visibility:hidden from/to the li樣式，它將在 IE 下停止工作（不再有:hover效果）。

另一個奇怪的事情是，如果 < li <img>行被刪除，它確實可以在沒有background或visibility:hidden的情況下工作（觸發:hover ）。 所以這不是:hover在 IE 中不可見的元素上不可能像人們想象的那樣的問題，我已經嘗試在任何地方添加顯式z-index es 但沒有成功......

知道發生了什么以及如何解決它嗎？

Answer 1

好吧，我通過在li上設置背景和opacity:0自己解決了這個問題（對於 IE 來說意味着filter: alpha(opacity:0)) 。 這樣， :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