jQuery：在某些元素的懸停上顯示光標右側的div

我有大約500 - 1000行實體稱爲測試，其中每個實體都有組件。當用戶懸停在任何測試中時，這些組件需要顯示。在mouseover上，我在一個div中顯示組件信息並將其隱藏在mouseout上。我能夠做到這一點，硬編碼頂部和左側的位置。但是，我需要能夠將該div顯示在光標右側，間隔爲50到100像素。jQuery：在某些元素的懸停上顯示光標右側的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;">

來源

2013-10-10 Animesh

我從ABHI的答案唯一改變的是使用screenX/screenY，而不是pageX屬性/ pageY

，並將它傳遞給fillTestComponents展現div時AJAX調用成功。

$('.test_row').mouseover(function(event) { 
    var x = event.clientX + 80; 
    var y = event.clientY + 2; 
    fillTestComponents(test, testId, x, y); 
});

來源

2013-10-11 06:12:45 Animesh

你必須首先獲取鼠標指針的位置，然後用它來定位你的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-10 14:38:53 Abhitalks

pageX/pageY正在將div發送到屏幕下方，所以我使用了screenX/screenY來代替，這對我的情況非常合適。我從這裏得到這個信息：http://stackoverflow.com/q/9262741/1539782 – Animesh

偉大的Avinash。謝謝。 – Abhitalks

jQuery：在某些元素的懸停上顯示光標右側的div

回答

相關問題