0

我有一个 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>
4

3 回答 3

2

这是因为您已将.pop-up元素附加到主体，所以它们不再是元素的子.thumbnail元素。

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

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

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

编辑 - 正如 cfs 在评论中提到的那样。将弹出窗口重新附加到缩略图是个好主意，这样下次悬停时它仍然可以工作。

于 2013-08-12T14:43:09.927 回答
1

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

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

不起作用。

为什么你首先要附加到身体上？似乎没有必要。

于 2013-08-12T14:42:49.427 回答
1

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

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

于 2013-08-12T14:47:16.277 回答