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

尽管你的类选择器，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

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

1 个答案: