Pokaż DIV na kursie myszy na zawisie o zakresie

Question

Chcę, aby DIV odkrył i pojawi się na kursie myszy, gdy użytkownik unosi się nad SPANEM lub DIV.

Zrobiłem tę funkcję, ale to nie działa (jquery jest ładowany).

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

Jesteś dość dużo tam:

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

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

i szybko skonfigurować ten przykład, wychodząc z kodem Dušan Radojević:

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

jsfiddle

Answer 3

Właściwie wolę odpowiedź Imperative. Nie mam privs aby dodać komentarz do swojego postu, więc tutaj jest jego kod, manipulowane, aby uczynić go nieco bardziej elastyczne:

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

Musisz być nieco mądry z telefonem Konwencje nazewnictwa id i div.

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> 

Myślę, że ten kod będzie przydatny w Twoim przypadku.