スパンのホバー上でマウスカーソルでDIVを表示

Question

ユーザーがSPANまたはDIVの上にマウスカーソルを置くと、DIVが元に戻って表示されます。

私はこの機能を作ったが動作しません（jqueryがロードされています）。

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

jsfiddle

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のために、私はすぐにドゥシャンRadojevićコードから始めて、この例を設定

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 2

：

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

私はこのコードがあなたのケースに役立つと思います。