我有一个非常奇怪的错误，试图在z-index上使用叠加层（更高:hover）突出显示图像的某些部分。在Safari / Firefox / Chrome中，没问题。但是在IE（8或9）中，我的简单CSS代码不起作用，因为当覆盖不总是可见时，IE似乎不会触发:hover（没有background-color或{{1 }}）
这是一个包含HTML和CSS的MWE：
visibility:hidden上面的代码有效，但是如果您尝试从<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，它将停止在IE下运行（不再是{{1}效果）。
另外一个奇怪的事情是，如果li行:hover，它在:hover上没有background或visibility:hidden的情况下有效（li被触发）已移除。所以<img>不能解决IE中不可见的元素问题，而且我已经尝试在任何地方添加明确的:hover es而没有成功......
知道发生了什么以及如何解决它？
答案 0 :(得分：0)
好吧，我通过在opacity:0设置背景和li来解决这个问题（对于IE来说意味着filter: alpha(opacity:0))。这样，:hover就会被正确触发。