Question

我有一个简单的场景，我有div标签，当鼠标悬停在它上面时，会显示一个包含更多信息的叠加层（使用jquery和jquery ui）。我遇到的问题是，当鼠标悬停在它上面时，叠加层会闪烁：

$('#myobject').hover(function() {
  $popover = $('#popover');
  $popover.show();
  $popover.position({
    my: "left top",
    at: "left top",
    of: $(this)
  });
}, function() {
  $('#popover').hide();
});

显然我必须做一些事情，在popover上移动鼠标不会杀死悬停事件，但我不知道该怎么做。您可以在此处看到正在运行的方案： http://jsfiddle.net/vRH3Q/2/

Answer 1

尝试将孩子<div>放在父<div>中：

<div id='myobject'>
    My Object
    <div id='popover'>My Popover</div>
</div>

jsFiddle

Answer 2

因为'hover'事件被附加到#myobject，所以它会闪烁。当您移动鼠标时，鼠标不会悬停在#myobject上，因为您#popover超过#myobject。因此，您在#myobject和#popover之间快速移动，导致闪烁发生。

更好的解决方案是使用鼠标悬停和鼠标悬停的组合。

$('#myobject').mouseenter(function() {
    $popover = $('#popover');
    $popover.show();
    $popover.position({
        my: "left top",
        at: "left top",
        of: $(this)
    });
});

$('#popover').mouseout(function() {
    $('#popover').hide();
});

我已更新了您的jsFiddle。

Answer 3

摆脱#myobject上的mouseleave事件并将其添加到#popover元素：

$('#myobject').bind('mouseenter',function() {
    $popover = $('#popover');
    $popover.show();
    $popover.position({
        my: "left top",
        at: "left top",
        of: $(this)
    });
});

$('#popover').bind('mouseleave', function(){
    $(this).hide();
});

更新了jsfiddle：http://jsfiddle.net/vRH3Q/2/

Answer 4

显示popover div后，jQuery认为它不再悬停在myobject上，移动鼠标并继续循环，导致闪烁。

这有效：

$('#myobject').mouseenter(function() {
    $popover = $('#popover');
    $popover.show();
    $popover.position({
        my: "left top",
        at: "left top",
        of: $(this)
    });
});

$('#popover').mouseout(function() {
    $('#popover').hide();
});

解决“角落”问题的一个笨重的解决方法（可能在某些情况下，根据您的需要）是确保只要鼠标返回页面正文就关闭了弹出窗口，添加：

$('body').hover(function() {
    $('#popover').hide();
});

如何在jquery中使弹出窗口不闪烁

4 个答案: