jquery - Chrome 错误选择/显示

Question

这似乎只发生在 Chrome 上，但基本上如果我有一个带有选择框的隐藏元素，并且当我将鼠标悬停在父元素上时，我有一些 javascript 让它显示。问题是选择框不能再被选中。我在jsfiddle上创建了一个演示。

HTML

<div class="widget-wrapper">
Test
<div class="widget">
    <select>
        <option>Test</option>
    </select>
</div>

JS

$('.widget-wrapper').mouseover(function(){
   $('.widget').show();
});
$('.widget-wrapper').mouseout(function(){
   $('.widget').hide();
});

CSS

.widget {
    display: none;
}

.widget.over {
    display: block;
}

score 5 · Accepted Answer

我无法在 Chrome/OSX 上重现它（我可以从该字段中选择一个值），但我认为问题是当您将选择悬停时它再次隐藏，因为这会触发父鼠标悬停。尝试 mouseenter/mouseleave 代替：

$('.widget-wrapper').mouseenter(function(){
    $('.widget').show();
});
$('.widget-wrapper').mouseleave(function(){
    $('.widget').hide();
});

另外，@nietonfir 在上面的评论中提到：这可以完全用 CSS 解决。

score 4 · Accepted Answer

我建议使用纯 CSS 解决方案：

.widget-wrapper .widget {
    display: none;
}
.widget-wrapper:hover .widget {
    display: block;
}

[编辑] 您的 jQuery 解决方案的问题在文档中进行了描述：

由于事件冒泡，这种事件类型会引起很多麻烦。例如，在本例中，当鼠标指针移到 Inner 元素上时，将向该元素发送 mouseover 事件，然后滴流到 Outer。这会在不合时宜的时候触发我们绑定的鼠标悬停处理程序。请参阅 .mouseenter() 的讨论以获取有用的替代方法。

简而言之：使用and （如果你真的需要的话）。mouseenter()mouseleave()

score 0 · Accepted Answer

当您单击选择丢失父元素时，悬停并选择进入活动模式

.widget select{
    display:none;
}
.widget:hover select,
.widget select:active{
    display:block;
}

score -3 · Accepted Answer

问题是，当您将鼠标悬停在选项上时，您不再将鼠标悬停在元素上。选项菜单与文档完全不同，处理方式也不一样。这意味着通过激活选项列表，您将鼠标移出元素，导致它被隐藏。

没有真正的解决方法，所以我建议制作一个“点击显示/隐藏”控件，而不是依赖鼠标悬停。这样触摸屏也会更友好。

4 回答 4