将鼠标悬停在下拉列表中会结束所有:IE中的悬停状态

时间:2011-01-03 19:52:38

标签: html internet-explorer

看一下这个小小的演示:http://jsfiddle.net/TnzS4/

打开SELECT框,并将其悬停在下拉列表中。

在Chrome,FF,Safari和Opera中,该框为红色,表示:hover状态仍处于活动状态。

在IE中,该框为灰色,表示:hover状态处于非活动状态。

这是IE漏洞吗?

修改:请在您的IE版本中打开上述页面并报告(通过评论)是否有此行为。

2 个答案:

答案 0 :(得分:1)

我不妨把它变成一个答案,因为我不能真正关闭它,因为它是一个完全有效的问题。正如安德鲁塞尔发现的那样,IE< = 7中似乎没有出现这个问题。我确认它不会发生在IE8中,然后我发现它不会发生在IE9平台预览版的最新版本中。因此,我认为我们可以将这一点归结为IE9测试版通道中的一个临时错误(尽管在最近一个版本发布时间近3个月之前很难将其称为“频道”)。

很好找,Šime。


编辑:我第一次看到这个问题时,我完全错过了关于你应该如何首先打开选择框的部分,然后将鼠标悬停在选项上。当发生这种情况时,似乎IE的所有版本(包括IE9的最新平台预览版)都不认为下面的div处于:hover状态。这完全取决于IE仍处理select元素中的事件的方式。令人遗憾的事实是,没有纯粹的CSS方法来解决这个问题。您需要在JavaScript中操作事件。

坏消息是,这只会让你成为那里的一部分。考虑一下:

http://jsfiddle.net/TnzS4/5/

$('#wrap > select').focus(function() {
    $('#wrap').addClass('wrap_hover');
}).blur(function() {
    $('#wrap').removeClass('wrap_hover');
});

当您将鼠标悬停在:hover元素上时,您不会丢失option,但是当您鼠标移除:hover时,您也不会丢弃#wrap元件。如果这种行为对您来说是不可接受的,那么您将不会高兴地知道您必须在JS中测试IE,否则此代码将复制所有浏览器中的行为。

所以我认为这就是死胡同的样子。如果我是你,我要么忽略这个问题(如果有人抱怨我会告诉他们不要使用糟糕的浏览器)或者我会摆脱:hover效果并找到另一种方法来达到目标您正试图实现的UI目标。

答案 1 :(得分:1)

我仍然看到这个问题。我正在使用IE 8,问题就出现了。 @treeface,你使用的是build 8.0.6001.18702吗? @Šime,你在IE8中看不到问题了吗?

我是最初将此引起Šime注意的人,因此,我想重新打开这个问题,或许找出为什么我的 Internet Explorer遇到此问题,而似乎没有其他人是?

所以真的,你们都没有这个问题吗?

根据我的IE开发人员栏,在浏览器模式下存在这个问题:IE8,IE7和IE8兼容性视图。还使用不同的文档模式(IE7标准,IE8标准,Quirks模式)进行了测试,但都给出了相同的错误。