奇怪：懸停的Z指數和img

我有一個非常奇怪的錯誤，試圖通過重疊（）:hover上重疊圖像的某些部分。在Safari/Firefox/Chrome中，沒有問題。但在IE（8或9），我簡單的CSS代碼不會因爲它似乎IE不會觸發:hover當覆蓋並不總是可見的（無background-color或visibility:hidden）奇怪：懸停的Z指數和img

這裏是一個MWE一起工作HTML和CSS：

<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到li造型，它停止工作IE（沒有更多:hover影響）下。

附加奇怪的是，它的工作（在:hover被觸發），而不background或visibility:hidden上li如果<img>行被刪除。因此，這不是:hover不是可能的，這不是明顯的在IE的人會認爲一個元素上的問題，我已經試過到處添加明確z-index ES沒有成功...

發生了什麼事的任何想法，以及如何解決這個問題？

來源

2012-04-10 Xavier

嗯，我解決它自己被設置在li（這對於IE意味着filter: alpha(opacity:0))。這樣一個背景和opacity:0，將:hover才能正確觸發。

來源

2012-04-10 19:20:48 Xavier

奇怪：懸停的Z指數和img

回答

相關問題