Comment puis-je trouver l'élément actuel sur mouseover en utilisant jquery

C'est ma version:

function handler(ev) { var target = $(ev.target); var elId = target.attr('id'); if( target.is(".el") ) { alert('The mouse was over'+ elId ); } } $(".el").mouseleave(handler); 

Violon de travail: http://jsfiddle.net/roXon/dJgf4/

 function handler(ev) { var target = $(ev.target); var elId = target.attr('id'); if( target.is(".el") ) { alert('The mouse was over'+ elId ); } } $(".el").mouseleave(handler); 

 .el{ width:200px; height:200px; margin:1px; position:relative; background:#ccc; float:left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Hover an element and refresh the page, than move your mouse away.</p> <div id="element1" class="el"></div> <div id="element2" class="el"></div> <div id="element3" class="el"></div> <div id="element4" class="el"></div> <div id="element5" class="el"></div> <div id="element6" class="el"></div> <div id="element7" class="el"></div> <div id="element8" class="el"></div> <div id="element9" class="el"></div> 

Vous pouvez essayer ceci:

 window.onmouseover=function(e) { console.log(e.target.className); }; 

Voulez-vous le nom de classe du div sur lequel survient l'événement mouseover? Si c'est le cas, référez-vous ceci,

HTML

 <div class="a">aaaaaaaa</div> <div class="b">bbbbbbbbb</div> 

JQuery

 $(document).on('mouseover', 'div', function(e) { console.log($(e.target).attr('class')); }); 

JsFiddle

J'ai utilisé l'événement mouseover avec la cible

E.target donne l'élément sur lequel cet événement se produit

Si vous souhaitez obtenir le nom de classe de div après avoir quitté la souris, utilisez l'événement "mouseleave" installé "mouseover"

Obtenez la position de l'élément sur mouseover, puis obtenez le nom de la classe

 <div id="wrapper"> <a href="#" class="anchorClass">A</a><div class="divClass">DIV</div> </div> $('#wrapper').mouseover(function(e) { var x = e.clientX, y = e.clientY, elementOnMouseOver = document.elementFromPoint(x, y); elementClass=$(elementOnMouseOver).attr('class'); alert(elementClass); }); 

JSFiddle: http://jsfiddle.net/ankur1990/kUyE7/

Si vous ne souhaitez pas appliquer cette option uniquement sur la division wrapper, mais sur toute la fenêtre / document, vous pouvez remplacer l'enveloppe par une fenêtre / un document

  $(window).mouseover(function(e){}); 

Ce que la plupart des gens ont négligé, c'est cette demande de l'OP:

When mouse over div from a

Cela signifie que vous devez savoir que vous avez survolé d'un type spécifique d'élément, pas seulement à partir d'un élément quelconque.

J'ai fait une var globale, en passant à vrai sur le mouseleave de mouseleave d'éléments spécifiques, dans votre cas et a élément. Ensuite, à l'intérieur de la fonction de survoltage, vous devez vérifier que c'est vrai.

Voici une démo

Edit: Démo de violon mis à jour avec des cas de bord lorsque survolent d' a élément non directement sur la div .

Cela devrait fonctionner:

Définissez une classe dans votre feuille de style:

 .detectable-div{ border: white solid 1px; } .detectable-div:hover{ border: red solid 1px; } 

Alors dans votre js:

 $('div.detectable-div:hover').mouseover(function () { $(this) // this is your object }) 

Tout selon la façon dont vous le souhaitez. Cela pourrait également être une option:

» Fiddle 1 «

Avec plus de détails. Cela ne montrera que vrai après avoir pris le chemin direct de a à div . (Le minuscule espace blanc entre a et div .) Comme dans:

• a -> div TRUE
• a -> div -> white space in between -> div FALSE

» Fiddle 2 «

Peut-être supporter. Cela apparaîtra également comme vrai si l'on se rend dans l'espace blanc minuscule entre a et div , puis revenez à div . Comme dans:

• a -> div -> white space in between -> div TRUE

 var mode = 0; $(window).on("mousemove", function(e) { if (e.target.className === "d1") { mode = 1; } else { var cc = e.target.className; if (cc !== "d2" && mode) { var el = $(".d1"), d1 = { x : el.offset().left, y : el.offset().top, w : el.width(), h : el.height() }, c = { x : e.pageX, y : e.pageY }; if (cx >= d1.x + d1.w && cy >= d1.y && cy <= d1.y + d1.h) mode = 2; else mode = 0; } else if (cc === "d2" && mode) { mode = 3; } } $("#status").html("Current: " + (mode == 3 ? "OVER" : "NOT OVER") + " from a" ); }); 

De jQuery API

  <div class="className"> <span class="span">move your mouse</span> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(".className").mouseover(function() { var n = $(this).attr("class"); $(".span").html(""); $(".span").html("The class :"+n); }); </script> 

Jsfiddle

 $(document).on('mouseover', 'div,a,span', function() { alert($(this).attr('class')); });