的WebKit点击的mouseenter /悬停事件

我来到这里提琴：http://jsfiddle.net/fjjr6sq2/1/这是非常简单的功能的WebKit点击的mouseenter /悬停事件

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

其显示和隐藏，当你的mouseenter /鼠标离开特定列表项的层。如果使用悬停功能交换mouseenter/mouseleave，结果同样如此。

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

问题：

当我选择选项3或4选择列表，则层突然显示，当然它不应该。当我将鼠标悬停在特定的列表项目上时，图层只应显示自己（获得/放松活动类）。

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

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

请指教。

更新

我不能录制的行为，所以我想图像将是这种情况下sufficent。

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

检查图像之后：

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

红点代表，我点击了点。

我的Chrome版本为：38.0.2125.111米

来源

2014-10-28 user3763270

我不能只是通过选择3或4。我没有重现此注意如果你选择一个高数字（比如10），然后选择一个高于它的数字（比如8或9），当选择列表关闭时，你的鼠标会留在一个li盒子上，这当然会出现一个图层。这在Firefox中不会发生，因为选择列表总是关闭。这是你正在努力的行为？ – cjspurgeon 2014-10-28 17:18:35

@cjspurg我已经更新了一些额外的输入和图像，希望能够更好地理解问题。 – user3763270 2014-10-29 08:39:29

我可以在PC上使用Chrome进行重新编辑，Mac上的Chrome不会执行此操作。到目前为止，我能得到的最接近的答案是在'.layer'类中添加'pointer-events：none'，但它仍然闪烁。不知何故，在选择一个选项后，鼠标暂时停留在图层上。我认为这是一个Chrome错误。 – cjspurgeon 2014-10-31 18:21:50

我找到了一个解决方法通过设置CSS属性1秒

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

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

来源

2015-02-05 09:56:32 jarreweb

如果您有新问题，请点击[问问题]（http://stackoverflow.com/questions/ask）按钮。如果有助于提供上下文，请包含此问题的链接。 – 2015-02-05 10:17:42

的WebKit点击的mouseenter /悬停事件

回答

相关问题