Question

我在这里有一个小提琴：http://jsfiddle.net/fjjr6sq2/1/这是一个非常简单的功能

$(".dropdown li").on("mouseenter", function(){
    $(this).find(".layer").addClass("active");
}).on("mouseleave", function(){
    $(this).find(".layer").removeClass("active");
});

在您鼠标输入/鼠标选择特定列表项时显示和隐藏图层。如果使用hover函数交换mouseenter / mouseleave，结果也是如此。

此问题仅存在于webkit浏览器，因此如果您想要正确复制，请使用Chrome。

问题：

当我从选择列表中选择选项3或4时，图层会突然显示，当然不应该显示。当我将鼠标悬停在特定列表项上时，图层应仅显示自身（获得/松散活动类）。

我无法做出任何解决方法，我很好奇CSS部分是否有问题（也许我缺少一两条规则）或者它可能是一个webkit错误。我搜索谷歌但没有成功缩小这种行为的原因。

不幸的是，我不能使用可能会解决问题的自定义选择插件。

请建议。

更新

我无法记录这种行为，所以我认为图像对于这种情况就足够了。

当我打开选择列表然后选择选项4时，图层会自动打开，因为我会点击与光标垂直的项目。因此，打开选择列表后将光标放在项目3下面将打开第3项的图层。

检查图像：

https://imageshack.com/a/ZnKz/1

红点代表我点击的点。

我的Chrome版本为：38.0.2125.111 m

Answer 1

我通过将css属性设置为1秒

找到了解决方法

$("select").click(function() {
    $('.layer').css('pointer-events', 'none');
    window.setTimeout( showpointer, 1000 );
});

function showpointer(){
    $('.layer').css('pointer-events', 'auto');
}

webkit点击最近的选择fires mouseenter / hover事件

1 个答案: