Hiển thị DIV tại con trỏ chuột khi di chuột qua khoảng

Question

Tôi muốn DIV hiện ra và xuất hiện tại con trỏ chuột khi người dùng di chuột qua SPAN hoặc DIV.

Tôi đã thực hiện chức năng này nhưng không hoạt động (jquery được tải).

function ShowHoverDiv(divid){ 

    function(e){ 
     var left = clientX + "px"; 
     var top = clientY + "px"; 
     $("#"+divid).toggle(150).css("top",top).css("left",left).css("position","fixed"); 
     return false; 
    } 


} 

<div id="divtoshow" style="display:none">test</div> 
<br><br> 
<span onmouseover="ShowHoverDIV('divtoshow')">Mouse over this</span> 

Answer 1

Bạn đang khá nhiều đó:

<div id="divtoshow" style="position: fixed;display:none;">test</div> 
<br><br> 
<span onmouseover="hoverdiv(event,'divtoshow')" onmouseout="hoverdiv(event,'divtoshow')">Mouse over this</span> 

Và đối với JS :

function hoverdiv(e,divid){ 

    var left = e.clientX + "px"; 
    var top = e.clientY + "px"; 

    var div = document.getElementById(divid); 

    div.style.left = left; 
    div.style.top = top; 

    $("#"+divid).toggle(); 
    return false; 
} 

Answer 2

tôi nhanh chóng thiết lập ví dụ này, bắt đầu với mã Dušan Radojević:

$("#spanhovering").hover(function(event) { 
    $("#divtoshow").css({top: event.clientY, left: event.clientX}).show(); 
}, function() { 
    $("#divtoshow").hide(); 
}); 

jsfiddle

Answer 3

Thực ra, tôi thích câu trả lời của Imperative hơn. Tôi không có privs để thêm một bình luận cho bài của mình, vì vậy đây là mã của mình, tinh chỉnh để làm cho nó một chút dễ thích nghi hơn:

$(".spanhover").hover(function(event) { 
    var divid = "#popup" + $(this).attr("id") 
    $(divid).css({top: event.clientY, left: event.clientX}).show(); 
}, function() { 
    var divid = "#popup" + $(this).attr("id") 
    $(divid).hide(); 
}); 

http://jsfiddle.net/SiCurious/syaSa/

Bạn sẽ cần phải có một chút khéo léo với bạn quy ước đặt tên div và span id.

Answer 4

$('#divToShow,#span').hover(function(e){ 
var top = e.pageY+'px'; 
var left = e.pageX+'px' 
$('#divToShow').css({position:'absolute',top:top,left:left}).show(); 
}, 
function(){ 
    $('#divToShow').hide(); 
}); 
<div id="divToShow" style="display:none">test</div> 
<br/><br/> 
<span id="span" >Mouse over this</span> 

Tôi nghĩ mã này sẽ hữu ích cho trường hợp của bạn.