鼠标离开（悬停）第一个元素时保留第二个元素

Question

我尝试使用插件 hoverIntent 将鼠标悬停在元素上来创建 div 元素。

<div class="element" style="with: 100%; height: 50px; border: 1px solid #000, margin: 5px">Main element</div>

将获得：

<div class="element" style="with: 100%; height: 50px; border: 1px solid #000, margin: 5px">Main element</div>
<div class="element new" style="with: 100%; height: 50px; border: 1px solid #000, margin: 5px">New element</div>

hoverIntent:

$(document).hoverIntent({
        over: function() {
            $(this).after('<div class="element new" style="with: 100%; height: 50px; border: 1px solid #000, margin: 5px">New element</div>');
        },
        out: function(){
            $('.new').slideUp(200, function() { $(this).remove(); });
        },
        selector: '.element'
});

我不知道如何解决这个问题，即当用户将鼠标从第一个元素移到第二个元素时，新元素总是消失。如果用户将鼠标移到主要元素或新元素上，新元素仍应显示。只有当鼠标移动到别处时，新元素才会消失。

Answer 1

尽管您使用 class-选择器，但 hoverIntent 将针对您在初始状态悬停的那个元素触发，因此 out-函数将针对该元素触发。此处不包括新元素。

您将看到 console.log($(this)) 的输出。仅包含一个对象 (demo) 因此只有 $(this) 中的那个元素 out 函数才有效。

我建议将您的元素包装到另一个 div:

HTML

<div class="wrapper">
    <div class="element" style="with: 100%; height: 50px; border: 1px solid #000, margin: 5px">Main element</div>
</div>

jQuery

$(document).hoverIntent({
    over: function () {
        $(this).append('<div class="element new" style="with: 100%; height: 50px; border: 1px solid #000, margin: 5px">New element</div>');
    },
    out: function () {
        $('.new').slideUp(200, function () {
            $(this).remove();
        });
    },
    selector: '.wrapper'
});

Demo

要将元素动态包装到 div 中，您可以使用此代码段：

var wrapper = $('<div />').addClass('wrapper');
$('.element').wrap(wrapper);

Demo 2

鼠标离开（悬停）第一个元素时保留第二个元素

keep second element while mouse leave (hover) first element

jquery

hoverintent