Mostra DIV con il cursore del mouse al passaggio del mouse su

Question

Voglio un DIV da mostrare e visualizzare il cursore del mouse quando l'utente passa su uno SPAN o DIV.

Ho fatto questa funzione ma non funziona (jquery è caricato).

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

sei praticamente lì:

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

E per il 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

ho subito impostato in questo esempio, partendo con il codice di Dušan Radojević:

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

jsfiddle

Answer 3

In realtà, preferisco di gran lunga la risposta di Imperative. Non ho privs per aggiungere un commento al suo posto, ecco il suo codice, ottimizzato per renderlo un po 'più adattabile:

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

Avrete bisogno di essere un po' intelligente con il tuo div e span id convenzioni di denominazione.

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> 

Penso che questo codice sarà utile per il tuo caso.