jquery – 当你在<= IE 8中鼠标时,Hover不会消失

我遇到了一个我在其他地方找不到的有趣问题.

看一下this JSFiddle.我有一个div,当你将鼠标悬停在它上面时会发生两件事：(1)它通过：hover伪类获得一些CSS格式,(2)一个覆盖有一些关于图像的信息弹出窗口在图像的底部(通过jQuery).

这适用于所有现代浏览器,但在IE 7或8中打开它.将鼠标悬停在框架上.如果你鼠标移到框架的顶部,没有问题 – 叠加层消失,CSS格式被删除.但是,如果鼠标在鼠标移动时直接通过叠加层,则：悬停格式保留. jQuery知道你被淘汰了因为覆盖被删除了,但是IE没有,因为CSS：悬停格式仍然存在.有什么想法吗？

解决方法

看到你已经使用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 to .hover on all related elements.按照这个小提琴：

http://jsfiddle.net/BZj2v/