我在使用 IE9 时遇到问题。当悬停在 .photo-nav 上时，.photo-nav-icon 应该可见。这在我尝试过的所有其他浏览器中都可以正常工作。
这是我的标记:
<div class="photo-content">
<img class="photo-img" src="/Images/empty.gif" />
<div class="photo-nav prev" data-direction="prev">
<div class="photo-nav-icon prev"></div>
</div>
<div class="photo-nav next" data-direction="next">
<div class="photo-nav-icon next"></div>
</div>
</div>
这是我的 CSS:
.photo-content { position: relative; width: 600px; height: 400px; margin: 0 auto; }
.photo-img { width: 600px; height: 400px; display:block; }
.photo-nav { position: absolute; height: 400px; width: 72px; }
.photo-nav.prev { top: 0; left: 0; }
.photo-nav.next { top: 0; right: 0; }
.photo-nav-icon { height: 60px; width: 60px; display: none; }
.photo-nav-icon.prev { margin: 170px 0 0 10px; }
.photo-nav-icon.next { background-position: 0 -60px; margin: 170px 10px 0 0; }
.photo-nav:hover > .photo-nav-icon { display: block; }
这是一个Fiddle的问题。
请注意； Fiddle 中的边框不是设计的一部分。由于图像不可用，因此它们仅用于显示框架。然而，一个有趣的注意事项是 IE 确实可以识别照片导航 div 的边界，然后会对悬停使用react，但不会识别 div 的主体。
另一个注意事项:如果我将 img 更改为 div 并改为使用背景图像，IE 似乎可以正常工作，但这会导致其他问题，因为我无法/不知道如何 Hook 背景图像的 onload 事件.
最后，文档类型是 <!DOCTYPE html>
最佳答案
除了其他人遇到过同样的事情外，我无法找到有关此问题的更多信息。 Hover not working in Internet Explorer
正如 Woody 所建议的，这个问题可以通过添加一些背景色来解决，但是当然，即使不透明度最小，这也不是我们想要的 UI，因为导航必须是透明的。
我偶然发现的一个修复是设置 .photo-nav-icon 的不透明度属性而不是显示属性:
.photo-nav-icon { background-image: url(/Images/nav.png); height: 60px; width: 60px; opacity:0; }
.photo-nav:hover > .photo-nav-icon { opacity:1; }
这只适用于图标本身，仍然不会响应悬停在整个 .photo-nav div 上的操作，而且我不喜欢使用不透明度，因为每个浏览器都有自己的处理方式。
因此，正如另一篇 SO 帖子中所述，我只是添加了一个透明的 gif 图像作为 .photo-nav div 的背景并解决了问题:
.photo-nav { position: absolute; height: 400px; width: 72px; background:url(/Images/empty.gif); }
我对这个解决方案并不满意，但它确实有效。
关于internet-explorer - Internet Explorer 悬停行为不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16367077/