Jquery 鼠标移动时弹出局部视图，鼠标移出时隐藏

我对javascript非常陌生，我的ASP.NETMVC4应用程序遇到了问题。当用户将鼠标悬停在某个项目的技能类别上时，我希望动态显示该项目的技能列表（在类别中）。以下是我的两个问题：

1. 现在jquery将弹出部分视图（现在基本上是空白的），但当我将鼠标从弹出窗口中移开时，它仍然存在。我必须点击关闭按钮来摆脱弹出窗口。我也试过mouseleave和mouseout。为什么我离开时弹出窗口没有关闭

2. 如何在弹出窗口中获取项目的技能列表？每个类别中可以有0个或多个技能，我希望在他们自己的项目技能类别弹出窗口中显示它们（即，如果用户将鼠标悬停在与项目1相关的软技能图像上，它将弹出一个包含项目1的软技能的窗口）

以下是Razor视图：

<link href="../Content/popup-project-skills.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../Scripts/popup-project-skills.js"></script>

@foreach (var item in Model) {
    <tr class="project-in-list">
        <td>
            @Html.ActionLink(item.name, "Details", new { id = item.id })
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.locationName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.status)
        </td>

        <td align=center class="btn"><img src="../../Content/images/check.png" style="visibility: @(item.hasProgrammingSkills ? "visible" : "hidden") "/></td>
        <td align=center class="btn"><img src="../../Content/images/check.png" style="visibility: @(item.hasSoftSkills ? "visible" : "hidden") "/></td>

        <!-- I WANT THESE IN THE POPUP INSTEAD OF PRINTING THEM IN A NEW COLUMN -->
        <td>
            @foreach(var skill in item.programmingSkills)
            {
                @Html.DisplayFor(modelItem => skill.skillName)
                @Html.Raw("; ")
            }
            @foreach(var skill in item.softSkills)
            {
                @Html.DisplayFor(modelItem => skill.skillName)
                @Html.Raw("; ")
            }
        </td>

    </tr>
}

---

您是否考虑过使用对象而不是弹出窗口

我认为这是一个更简单的解决方案。

对问题1的回答： 尝试更改：

$("#btn").mouseout(function ()

致：

#

用于id选择器，

用于类选择器。您没有为这些按钮分配id，只有类

问题2： 老实说，我不能马上回答第二个问题，而且我也无法在工作中使用这些东西进行测试

您应该在js中使用

.btn

而不是

#btn

试着把你的问题分成几个小问题。如果我理解正确，您可以尝试这样的想法：对于每个模型项，您应该创建一个id为的隐藏div，如下所示

“softSkills”+item.id

。然后每次将此id的内容插入到popup div元素中时，类似jQuery的版本：

$（'popupDiv'）.html（$（'softSkills1'））

不要使用内联css和js

-此版本已被弃用，再次声明不要使用任何响应css/less/sass/scss/compass等之外样式的内容。。样式表文件

对于未来：剃须刀是丑陋的，有虫子，当你们试图理解它如何以及为什么不能与大模型结构一起工作时，你们有时会头疼。纯HTML、Ajax和jsTemplate引擎是未来的发展方向，在可移植性和调试方面会更好

$("#btn").mouseout(function ()

$(".btn").mouseout(function ()