Wie positioniere ich ein Div relativ zum Mauszeiger mit jQuery?

Question

Angenommen, ich habe einen Link in meiner Seite und ich möchte, dass, wenn ich meine Maus nur über den Link platzieren, ein div dort entsprechend der Maus x, y zeigen wird.

Wie kann ich dies mit jQuery erreichen?

Answer 1

var mouseX; 
var mouseY; 
$(document).mousemove(function(e) { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
}); 
$(".classForHoverEffect").mouseover(function(){ 
    $('#DivToShow').css({'top':mouseY,'left':mouseX}).fadeIn('slow'); 
}); 

Die obige Funktion bewirkt, dass das DIV über dem Link erscheint, unabhängig davon, wo sich dieses auf der Seite befindet. Es wird langsam eingeblendet, wenn die Verbindung schwebt. Sie könnten stattdessen auch .hover() verwenden. Von dort aus werden die DIV bleiben, wenn Sie also die DIV möchten verschwinden, wenn die Maus weg bewegt, dann

$(".classForHoverEffect").mouseout(function(){ 
    $('#DivToShow').fadeOut('slow'); 
}); 

Wenn Sie DIV bereits positioniert, Sie einfach

$('.classForHoverEffect').hover(function(){ 
    $('#DivToShow').fadeIn('slow'); 
}); 

auch verwenden können Denken Sie daran, Ihr DIV-Stil muss auf display:none; eingestellt sein, damit er ein- oder ausblenden kann.

Answer 2

<script type="text/javascript" language="JavaScript"> 

    var cX = 0; 
    var cY = 0; 
    var rX = 0; 
    var rY = 0; 

    function UpdateCursorPosition(e) { 
    cX = e.pageX; 
    cY = e.pageY; 
    } 

    function UpdateCursorPositionDocAll(e) { 
    cX = event.clientX; 
    cY = event.clientY; 
    } 
    if (document.all) { 
    document.onmousemove = UpdateCursorPositionDocAll; 
    } else { 
    document.onmousemove = UpdateCursorPosition; 
    } 

    function AssignPosition(d) { 
    if (self.pageYOffset) { 
     rX = self.pageXOffset; 
     rY = self.pageYOffset; 
    } else if (document.documentElement && document.documentElement.scrollTop) { 
     rX = document.documentElement.scrollLeft; 
     rY = document.documentElement.scrollTop; 
    } else if (document.body) { 
     rX = document.body.scrollLeft; 
     rY = document.body.scrollTop; 
    } 
    if (document.all) { 
     cX += rX; 
     cY += rY; 
    } 
    d.style.left = (cX + 10) + "px"; 
    d.style.top = (cY + 10) + "px"; 
    } 

    function HideContent(d) { 
    if (d.length < 1) { 
     return; 
    } 
    document.getElementById(d).style.display = "none"; 
    } 

    function ShowContent(d) { 
    if (d.length < 1) { 
     return; 
    } 
    var dd = document.getElementById(d); 
    AssignPosition(dd); 
    dd.style.display = "block"; 
    } 

    function ReverseContentDisplay(d) { 
    if (d.length < 1) { 
     return; 
    } 
    var dd = document.getElementById(d); 
    AssignPosition(dd); 
    if (dd.style.display == "none") { 
     dd.style.display = "block"; 
    } else { 
     dd.style.display = "none"; 
    } 
    } 
    //--> 
</script> 


<a onmouseover="ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')"> 
[show on mouseover, hide on mouseout] 
</a> 
<div id="uniquename3" style="display:none; 
position:absolute; 
border-style: solid; 
background-color: white; 
padding: 5px;"> 
    Content goes here. 
</div> 

Answer 3

Sie müssen don kein $(document).mousemove(function(e) {}) zu behandeln Maus x, y zu erstellen. Holen Sie sich das Ereignis in der $.hover Funktion und von dort ist es möglich, x und y Positionen der Maus zu erhalten. Siehe den folgenden Code:

$('foo').hover(function(e){ 
    var pos = [e.pageX-150,e.pageY]; 
    $('foo1').dialog("option", "position", pos); 
    $('foo1').dialog('open'); 
},function(){ 
    $('foo1').dialog('close'); 
}); 

Answer 4

Es gibt viele Beispiele für die Verwendung von JQuery zum Abrufen der Mauskoordinaten, aber keine behoben mein Problem.

Der Text meiner Webseite ist 1000 Pixel breit und ich zentriere ihn in der Mitte des Browserfensters des Benutzers.

body { 
    position:absolute; 
    width:1000px; 
    left: 50%; 
    margin-left:-500px; 
} 

Jetzt, in meinem JavaScript-Code, wenn der Benutzer auf meiner Seite rechts geklickt hat, wollte ich einen div an der Mausposition angezeigt werden.

Problem ist, nur mit e.pageX Wert war nicht ganz richtig. Es würde gut funktionieren, wenn ich die Größe meines Browserfensters auf 1000 Pixel erweitern würde. Dann würde der Popdiv an der richtigen Position erscheinen.

Aber wenn die Größe meines Browser-Fensters zu sagen, 1200 Pixel breit, dann würde das div etwa 100 Pixel auf der rechten Seite von wo der Benutzer geklickt hatte.

Die Lösung besteht darin, e.pageX mit dem umschließenden Rechteck des Körperelements zu kombinieren. Wenn der Benutzer die Größe ihres Browserfensters ändert, „links “ der Wert des Körperelements ändert, und wir müssen dies berücksichtigen:

// Temporary variables to hold the mouse x and y position 
var tempX = 0; 
var tempY = 0; 

jQuery(document).ready(function() { 
    $(document).mousemove(function (e) { 
     var bodyOffsets = document.body.getBoundingClientRect(); 
     tempX = e.pageX - bodyOffsets.left; 
     tempY = e.pageY; 
    }); 
}) 

Puh. Das hat eine Weile gedauert, um es zu reparieren! Ich hoffe, das ist nützlich für andere Entwickler!