奇怪：悬停的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

回答

相关问题