我遇到了一个在其他地方找不到的有趣问题。
看看this JSFiddle。我有一个 div，当您将鼠标悬停在它上面时会发生两件事：（1）它通过 :hover 伪类获得一些 CSS 格式，以及（2）一个包含有关图像的一些信息的叠加层会在图像底部弹出（通过 jQuery）。
这在所有现代浏览器中都可以正常工作，但在 IE 7 或 8 中打开它。将鼠标悬停在框架上。如果您将鼠标悬停在框架顶部，则没有问题——覆盖消失并且 CSS 格式被删除。但是，如果您的鼠标在鼠标移出时直接经过覆盖层，则 :hover 格式会保留。 jQuery 知道您已将鼠标移出，因为覆盖已被删除，但 IE 不知道，因为 CSS :hover 格式仍然存在。有什么想法吗？
【问题讨论】：
标签： jquery html css internet-explorer-8 internet-explorer-7
CSS :hover 对除 link <a>..</a> 之外的所有元素的支持不完整/IE
http://www.quirksmode.org/css/contents.html#t16
IE 5/6 只支持链接。 IE 7 在所有元素上都支持 :hover，但不支持 :active。
IE 8-10（也可能是旧版本）有一个小错误：在嵌套元素上单击鼠标不会触发 :active。通过在其中一个代码示例上按下鼠标按钮在测试页面中进行尝试。 :active 样式不会生效。
【讨论】：
鉴于您已经在使用 jQuery 进行悬停，我建议您将脚本更改为：
$(document).ready(function() {
$('#frame').hover(
function() {
$('#frame').addClass('hover').append('<div id="overlay">blah blah</div>');
},
function() {
$('#frame').removeClass('hover')
$('#overlay').remove();
}
);
});
然后将所有相关元素上的 CSS 从 :hover 更改为 .hover。按照这个小提琴：
【讨论】：
这是 jQuery 中众所周知的事情，因为 Internet Explorer 的鼠标离开功能是专有的。您将需要使用 jquery 的 mouseleave/mouseenter 方法。
这是您的 updated fiddle fiddle 与 mouseenter() 和 mouseleave() 方法。它可以工作并且已经在 IE7-9 中测试过。
为方便起见，我也将代码包含在此处：
JS：
$(document).ready(function() {
$('#frame').mouseenter(function() {
var $this = $(this);
$this.append('<div id="overlay">blah blah</div>');
$this.addClass("hover");
}).mouseleave(function() {
$('#overlay').remove();
$(this).removeClass("hover");
});
$('#overlay').mouseleave(function() {
$(this).remove();
});
});
CSS：
#frame {
padding:5px;
border:1px solid black;
width:150px;
text-align:center;
position:relative;
}
#frame.hover {
border:1px solid red;
}
#frame img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
filter: alpha(opacity=25);
-moz-opacity: 0.25;
opacity: 0.25;
}
#frame.hover img {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
#overlay {
background-color:black;
color:white;
height:25px;
width:100%;
font-size:10px;
position:absolute;
bottom:0;
left:0;
}
编辑：我已经根据您在评论中描述的结果更新了我的小提琴和上面的代码。它应该可以完全工作 - 如果没有，请告诉我。
更多细节：
此解决方案使用 jQuery 的 mouseenter 和 mouseleave 方法，因为 IE 使用 hover 方法存在许多问题。您可能知道也可能不知道，hover 是 mouseenter/mouseleave 的简写版本，但 hover 方法存在许多问题，这些问题一直源于 IE6-9（也可能是 IE 10 ，虽然我还没有测试过）。对于某些特定问题，请在 Stack Overflow 或 Google 中搜索“jQuery hover IE issues”并查看出现的一些结果。出于这个原因，我总是多花十秒钟来输入mouseenter/mouseleave，而不是使用hover，尤其是当我在IE中的代码已经遇到问题时。
如果您有任何问题/困难，请告诉我。祝你好运！ :)
【讨论】：
hover 方法，您可能会为更大的问题打开大门。