Comment positionner une div par rapport au pointeur de la souris à l'aide de jQuery?

Question

Supposons que j'ai un lien dans ma page et que je souhaite que, lorsque je place la souris juste au-dessus du lien, un div y s'affiche en fonction de la souris x, y.

Comment puis-je accomplir cela en utilisant jQuery?

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');
});

la fonction ci-dessus fera l'DIV apparaissent sur le lien où que ce soit sur la page. Il va se fanent lentement lorsque le lien est planait. Vous pouvez également utiliser .hover() à la place. À partir de là, la DIV restera, alors, si vous voulez la DIV à disparaître lorsque la souris passe au loin, puis,

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

Si vous DIV est déjà positionné, vous pouvez simplement utiliser

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

Aussi, gardez à l'esprit, votre DIV style doit être mis à l' display:none; pour fadeIn ou un spectacle.

Answer 2

Il existe de nombreux exemples de l'utilisation de JQuery pour récupérer les coordonnées de la souris, mais aucun corrigé mon problème.

Le Corps de ma page web est de 1000 pixels de large, et je centre au milieu de l'utilisateur de la fenêtre du navigateur.

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

Maintenant, dans mon code JavaScript, lorsque l'utilisateur a cliqué avec le bouton droit sur ma page, je voulais un div à apparaître à la position de la souris.

Problème est, juste à l'aide de l'e.pageX valeur n'était pas tout à fait droit. Il avait un bon travail, si j'ai redimensionné mon navigateur à environ 1000 pixels de large. Ensuite, le menu div aurait apparaissent à la bonne position.

Mais si l'augmentation de la taille de ma fenêtre du navigateur, par exemple, à 1200 pixels de large, puis la div apparaît sur 100 pixels vers la droite de l'endroit où l'utilisateur a cliqué.

La solution est de combiner l' e.pageX avec le rectangle de délimitation de l'élément body. Lorsque l'utilisateur change la taille de la fenêtre de son navigateur, la "gauche" la valeur de l'élément de corps de changements, et nous avons besoin de prendre cela en compte:

// 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;
    });
}) 

Ouf. Qui m'a pris un moment pour le fixer ! J'espère que ce sera utile à d'autres développeurs !

Answer 3

Vous n'avez pas besoin de créer un $(document).mousemove( function(e) {}) pour gérer la souris x, y. Obtenez l'événement dans la fonction $.hover et à partir de là, il est possible d'obtenir les positions x et y de la souris. Voir le code ci-dessous:

 $('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

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