Chrome Bug选择/显示

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

Answer 1

我无法在Chrome / OSX上重现它（我可以从字段中选择一个值），但我相信问题是当你将鼠标悬停在选择上时它会再次隐藏，因为它会触发父节点上的鼠标输出。请尝试使用mouseenter / mouseleave：

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

http://jsfiddle.net/qmnRL/1/

---

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

Answer 2

我建议使用仅限CSS的解决方案：

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

[edit]您在jQuery解决方案中遇到的问题在documention中有所描述：

  

此事件类型可能会因事件冒泡而导致许多令人头疼的问题。对于   例如，当鼠标指针在此内部元素上移动时   例如，鼠标悬停事件将被发送到该事件，然后涓涓细流   外。这可以在inopportune触发我们绑定的mouseover处理程序   倍。有关有用的替代方法，请参阅.mouseenter（）的讨论。

在nutshell中：使用mouseenter()和mouseleave()（如果您确实需要）。

Answer 3

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

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

Fiddle

Answer 4

问题在于，当您将鼠标悬停在选项上时，您不再将鼠标悬停在元素上。选项菜单与文档完全不同，并且不以相同的方式处理。这意味着通过激活选项列表，您将被置于元素之外，导致其被隐藏。

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