Chrome Bug选择/显示

Question

这似乎只发生在Chrome上,但基本上如果我有一个带有选择框的隐藏元素,我有一些javascript使它显示我鼠标悬停父元素.问题是无法再选择选择框.我在jsfiddle上创建了一个demo .

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

另外,@nietonfir在上面的评论中提到:这可以完全用CSS解决.