jquery - 鼠标移动时弹出部分 View ，鼠标移开时隐藏

Question

我对 javascript 很陌生，并且我的 ASP.NET MVC 4 应用程序遇到了问题。我想当用户将鼠标悬停在项目的技能类别上时动态显示该项目的技能列表(在某个类别中)。这是我的两个问题:

1.现在，jquery 将弹出部分 View (现在基本上是空白的)，但是当我将鼠标从弹出窗口移开时，它仍然存在。我必须单击关闭按钮才能摆脱弹出窗口。我还尝试过 mouseleave 与 mouseout。为什么我离开时弹出窗口没有关闭？

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

这是 Razor View :

<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>
}

这是我正在使用的 JavaScript:

function loadPopup()
{
    $("#backgroundPopup").css({"opacity": "0.1"});
    $("#backgroundPopup").fadeIn("fast");
    $("#popupContact").slideDown("fast");
}
function disablePopup()
{
    $("#backgroundPopup").fadeOut("slow");
    $("#popupContact").slideUp("fast");
}
function centerPopup()
{
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("#popupContact").height();
    var popupWidth = $("#popupContact").width();
    $("#popupContact").css({"position": "absolute","top": windowHeight/2-popupHeight/2,"left": windowWidth/2-popupWidth/2});
    $("#backgroundPopup").css({"height": windowHeight});
}

$(document).ready(function()
{
    $(".btn").mouseover(function()
    {
        centerPopup();
        loadPopup();
    });

    $("#btn").mouseout(function ()             // this does not work -> not sure why
    {
        disablePopup();
    });

    $("#popupContactClose, .c_btn").click(function()
    {
        disablePopup();
    });
});

Answer 1

您是否考虑过使用 jquery UI's tooltip 而不是弹出窗口对象？

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