4

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

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

这在所有现代浏览器中都可以正常工作，但在 IE 7 或 8 中打开它。将鼠标悬停在框架上。如果将鼠标悬停在框架顶部，则没有问题——覆盖消失，CSS 格式被删除。但是，如果您的鼠标在鼠标移出时直接经过叠加层，则 :hover 格式会保留。jQuery 知道您已将鼠标移出，因为覆盖已被删除，但 IE 不知道，因为 CSS :hover 格式仍然存在。有什么想法吗？

4

3 回答 3

5

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

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

IE 5/6 仅在链接上支持两者。IE 7 在所有元素上都支持 :hover，但不支持 :active。

IE 8-10（也可能是旧版本）有一个小错误：在嵌套元素上单击鼠标不会触发 :active。通过在其中一个代码示例上按下鼠标按钮在测试页面中进行尝试。:active 样式不会生效。

于 2012-09-27T14:35:50.273 回答
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/

于 2012-09-27T14:39:58.537 回答
2

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

这是您使用and方法更新的小提琴 小提琴。它可以工作并且已经在 IE7-9 中测试过了。mouseenter()mouseleave()

为方便起见，我也在此处包含代码：


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;
}


编辑：根据您在评论中描述的结果，我已经更新了我的小提琴和上面的代码。它应该完全有效 - 如果没有，请告诉我。


更详细一点：

该解决方案使用 jQuerymouseenter和mouseleave方法，因为 IE 使用该hover方法存在许多问题。正如您可能知道或可能不知道的那样，hover它是mouseenter/的简写版本mouseleave，但该方法存在许多问题，hover从 IE6-9（也可能是 IE 10，尽管我没有测试过）。对于某些特定问题，请在 Stack Overflow 或 Google 中搜索“jQuery hover IE issues”并查看出现的一些结果。出于这个原因，我总是多花十秒钟来输入mouseenter/mouseleave而不是使用hover，尤其是当我在 IE 中的代码已经遇到问题时。


如果您有任何问题/困难，请告诉我。祝你好运！:)

于 2012-09-27T14:49:34.963 回答