Question

我有一个jQuery函数，当div悬停时会显示一个弹出菜单：

<script type="text/javascript">   
    $('.thumbnail').hover(function (e) {
        $(this).children('.pop-up').show()
            .css('top', e.pageY + 20)
            .css('left', e.pageX + 10)
            .appendTo('body');
    }, function () {
        $(this).children('.pop-up').hide();
    });
</script>

第一个功能运行良好（当光标悬停在div上时会显示弹出菜单）但第二个功能不是（隐藏功能）

有什么想法吗？谢谢

修改

这是我的HTML结构：

    <div class="thumbnail">
                            .........
<div class='pop-up'><h3>"@thumbnail.Forfait.Titre"</h3><p>"@thumbnail.Forfait.Description"</p></div>
</div>

Answer 1

这是因为您已将.pop-up元素附加到正文，因此它们不再是.thumbnail元素的子元素。

将第二个函数中的代码更改为此代码，它应该可以工作：

$('body').children('.pop-up').hide().appendTo(this);

这假设没有其他元素具有.pop-up

类

编辑 - 正如评论中的cfs所述。最好将弹出窗口重新附加到缩略图，以便下次悬停时仍可使用。

Answer 2

当您将.pop-up附加到body时，它不再是.thumbnail div的子项，而是body的子项，所以

$(this).children('.pop-up').hide();

不起作用。

为什么你首先要附着在身体上？这似乎没必要。

Answer 3

嗯，您在第一个处理程序中选择的.pop-up元素会附加到body元素。

在另一个处理程序上，$(this).children('.pop-up')不再返回任何元素，因为它们不再是子元素了。

hover（）函数无法正常工作

3 个答案: