Question

$('img.clientImage').live('hover', function () {
    if ($('div#ClientImageHover').length > 0) {
        $('div#ClientImageHover').remove();
    } else {
        $('<div id="ClientImageHover">Change Image</div>').insertAfter($(this));
        $('div#ClientImageHover').css({ 'top': $(this).position().top });
    }
})

现在如果我将鼠标悬停在#ClientImageHover上会发生什么。你猜对了，它会开始快速闪烁。因为mouseout上有.clientImage个事件。我需要在这里创建元素并在img之后附加它然后将它放在它上面。这工作正常，但是当我将鼠标悬停在#ClientImageHover上时，我遇到了问题。如何在鼠标悬停时正常显示此div并保留当前的所有内容？

感谢。

Answer 1

要扩展我的评论，请执行以下操作jsFiddle

HTML：

<div class="container">
    <img class="clientImage"></div>
</div>

JS

$('.container').live('hover', function () {
    if ($('div#ClientImageHover').length > 0) {
        $('div#ClientImageHover').remove();
    } else {
        $('<div id="ClientImageHover">Change Image</div>').appendTo($(this));
        $('div#ClientImageHover').css({ 'top': $(this).position().top });
    }
});

Answer 2

你可以将它分解为使用.mouseenter（）和.mouseleave（）。在img.clientImage上使用.mouseenter（），然后仅在$('div#ClientImageHover').mouseleave();

上删除它

http://jsfiddle.net/gkkxG/

jquery两个div使用＆＃39; hover＆＃39;事件

2 个答案: