3

这似乎只发生在 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;
}
4

4 回答 4

5

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

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

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


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

于 2013-10-18T22:19:22.847 回答
4

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

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

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

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

简而言之:使用and (如果你真的需要的话)mouseenter()mouseleave()

于 2013-10-18T23:16:23.793 回答
0

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

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

小提琴

于 2013-11-27T18:25:25.953 回答
-3

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

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

于 2013-10-18T22:20:10.463 回答