Javascript 使用ASP.NETMVC4的jQuery对话框悬停缩略图

我在使用jQuery和ASP.NETMVC4制作一个小函数时遇到了一个小问题

我有一个缩略图列表，它代表我应用程序中的产品列表：

<ul class="thumbnails">
                @foreach (var thumbnail in Model.ForfaitsInThumbNail)
                {
            <!-- Now I Display Some infos about the thumbnail -->
            <!-- This is the Dialog that I want to display when the cursor is hover every thumbnail -->
            <div class='pop-up' id='pop-up'><h3>"@thumbnail.Forfait.Titre"</h3><p>"@thumbnail.Forfait.Description"</p></div>
                    </div>
            <!-- This simply displays a description and the title of every product -->
                }
</ul> 

@foreach（Model.ForfaitsInThumbNail中的变量缩略图）
{
“@thumbnail.Forfait.Titre”“@thumbnail.Forfait.Description”

}

我有一个jQuery函数，可以显示自定义的弹出菜单，以显示每个产品的特定标题和说明：

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

$（'.thumbnail'）。悬停（函数（e）{
$（'弹出框'）.show（）
.css（'top'，e.pageY+20）
.css（'left'，e.pageX+10）
.附于（“主体”）；
}，函数（）{
$（“#弹出框”）.hide（）；
});
$（'.thumbnail'）.mousemove（函数（e）{
$（“#弹出框”）.css（'top'，e.pageY+20）。css（'left'，e.pageX+10）；
});

因此，这个函数工作得很好，但它不能满足我的所有需求，因为它只显示最后一个缩略图的标题和说明，但我需要一个函数来缩小每个具有“缩略图”的div，并显示其特定的标题和说明。有什么想法吗？我将非常感谢你的帮助：）

编辑

以下是我建议的新功能：

<script type="text/javascript">   
    $('.pointHere').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();
    });
    $('.pointHere').mousemove(function (e) {
        $(this).children('.pop-up').css('top', e.pageY + 20).css('left', e.pageX + 10);
    });
</script>

$（'.pointHere'）.hover（函数（e）{
$（this.children（'.pop-up'）.show（）
.css（'top'，e.pageY+20）
.css（'left'，e.pageX+10）
.附于（“主体”）；
}，函数（）{
$（this.children（'.pop-up'）.hide（）；
});
$（'.pointHere'）.mousemove（函数（e）{
$（this）.children（'.pop-up'）.css（'top'，e.pageY+20）.css（'left'，e.pageX+10）；
});

---

我制作了一个div，其中有一个类pointHere，当我们单击它时，会显示子元素弹出窗口：）这很好：）但是mouseover函数不起作用，当鼠标不悬停pointHere div时，hover函数也不会隐藏弹出窗口。

问题在于id

弹出窗口。这不是唯一的。您的所有缩略图都具有相同的Id

不要绑定
鼠标悬停在
上的
缩略图上，而是将其绑定在
上。弹出
并使用
此
获取该div

$('.pop-up').hover(function (e) {
    $(this).show()
        .css('top', e.pageY + 20)
        .css('left', e.pageX + 10)
        .appendTo('body');
}, function () {
    $(this).hide();
});

此外，您的HTML也不好。您的弹出式div关闭了两次
 也许你可以提供编译后的HTML，而不是ASP.NET和HTML的混合？你的想法很好：）但问题是弹出div默认设置为隐藏（在css中），现在当我运行这个时，没有特定的地方用户可以指向显示弹出，因为它是隐藏的。我进行了编辑，显示效果很好，但当鼠标不悬停时，div、child div不会隐藏，mouseover函数也不起作用，但前面的问题在哪里解决了：）