Question

我遇到了一个我在别处找不到的有趣问题。

看看this JSFiddle。我有一个div，当你将鼠标悬停在它上面时会发生两件事情：（1）它通过：hover伪类获得一些CSS格式，以及（2）在图像底部弹出一些关于图像的信息的叠加层（通过jQuery）。

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

Answer 1

除链接:hover 之外的所有元素的CSS <a>..</a>支持不完整/不支持IE＆lt; 8。

http://www.quirksmode.org/css/contents.html#t16

IE 5/6仅支持链接。 IE 7支持：在所有元素上悬停，但不是：活动。

IE 8-10（也可能是旧版本）有一个小错误：在嵌套元素上单击鼠标不会触发：激活。通过按下其中一个代码示例上的鼠标按钮在测试页中尝试它。：活跃的风格不会起作用。

Answer 2

由于您已经在使用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。按照这个小提琴：

http://jsfiddle.net/BZj2v/

Answer 3

这是jQuery中众所周知的事件，因为Internet Explorer的鼠标离开功能是专有的。您将需要使用jquery的mouseleave / mouseenter方法。

以下是使用mouseenter()和mouseleave()方法的 ~~updated fiddle~~ fiddle 。它可以在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悬停IE问题”并查看出现的一些结果。出于这个原因，我总是花费额外的十秒钟来输入mouseenter / mouseleave，而不是使用hover，特别是当我已经在IE中遇到我的代码问题时。

如果您有任何疑问/困难，请告诉我。祝好运！：）

当您在＆lt; = IE 8中鼠标移开时，悬停不会消失

3 个答案: