범위 위로 마우스를 가져 가면 DIV가 표시됩니다.

Question

사용자가 SPAN 또는 DIV를 가리키면 DIV를 숨기고 마우스 커서에 표시하려고합니다.

이 함수를 만들었지 만 작동하지 않습니다 (jquery가로드 됨).

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

당신은 거의 거기 :

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

그리고 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

나는 빨리의 Dušan Radojević 코드로 시작,이 예제를 설정 :

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

jsfiddle

Answer 3

실은 나는 명령의 대답을 선호합니다. 나는 그의 게시물에 댓글을 추가 할 수 privs 및이없는, 그래서 여기가 조금 더 적응하기 위해 불통 자신의 코드입니다 :

$(".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/

당신은에 조금 영리해야 할 것이다 div 및 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> 

이 코드는 귀하의 경우에 유용 할 것입니다.