0

我有大约 500 - 1000 行称为测试的实体，每个实体都有组件。当用户将鼠标悬停在任何测试上时，需要显示这些组件。在 上mouseover，我在 div 中显示组件信息并将其隐藏在 上mouseout。我可以通过硬编码的顶部和左侧位置来做到这一点。但是，我需要能够以 50 到 100 像素的间隙将 div 显示在光标的右侧。

我怎样才能改变我的代码来做到这一点？

$(".test_row").mouseover(function (event) {
    fillTestComponents(test, testId);
});

$(".test_row").mouseout(function (event) {
    $("#testCompHolder").hide();
});

function fillTestComponents(test, testId) {
    $.ajax({
        type: 'GET',
        url: "@Url.Action("GetTestComponents", "Templates", new { area = "Orders" })",
        data: { testIdentifier: testId },
        async: false,
        success: function (data) {
            var componentCount = data.length;
            if (componentCount != 0) {
                componentsHtml = "<p><u>" + test + "</u></p><ul>";
                for (var i = 0; i < componentCount; i++) {
                    componentsHtml = componentsHtml + "<li>(" + data[i].TestIdentifier + ") " + data[i].Description + "</li>"
                }
                componentsHtml += "</ul>";
                $('#testCompHolder').html(componentsHtml);
                $("#testCompHolder").show();
            }
            else {
                componentsHtml = "<p>No components exist for this test.</p>";
                $("#testCompHolder").show();
            }
        },
        error: function () {
            alert('An error occurred while loading the results.');
        }
    });
}

HTML：

<div id="testCompHolder" style="display:none; padding: 4px; border: 2px black solid; background-color: #dddddd; position: fixed; top: 300px; left: 380px;">
4

2 回答 2

1

您必须首先获取鼠标指针的位置，然后使用它来定位您的div.

像这样的东西：

$('.test_row').mouseover(function(evt) {
    var x = evt.pageX + 50, y = evt.pageY + 50; 
    $('#testCompHolder').css({ 'left': x + 'px', 'top': y + 'px' }); 
    $("#testCompHolder").show();
});

虽然没有测试过。

于 2013-10-10T14:38:53.640 回答
0

我从 Abhi 的回答中唯一改变的是使用screenX/screenY而不是 pageX/pageY

并fillTestComponents在 ajax 调用成功时将其传递给 div 以显示 div。

$('.test_row').mouseover(function(event) {
    var x = event.clientX + 80;
    var y = event.clientY + 2;
    fillTestComponents(test, testId, x, y);
});
于 2013-10-11T06:12:45.470 回答