web-dev-qa-db-fra.com

Comment puis-je trouver l'élément actuel au survol avec jQuery?

Comment puis-je obtenir le nom de classe de l'élément actuel qui se trouve au survol de la souris? Par exemple enter image description here

Quand une souris passe de div à a, je veux obtenir le nom de classe d'un élément div. Comment l'obtenir en utilisant jQuery?

javascriptjqueryhtmlmouseovermouseout
22
midstack

Voici 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>
23
Hackerman

vous pouvez essayer ceci:

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

Voulez-vous le nom de classe du div sur lequel se produit l'événement mouseover? Si tel 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 survol avec la cible

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

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

8
Snehal S

Ce que la plupart des gens ont négligé, c'est cette demande du PO:

When mouse over div from a

Cela signifie que vous devez savoir que vous avez survolé un type d'élément spécifique, et pas n'importe quel élément.

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

Voici une démo

Edit: Mise à jour de la démonstration du violon avec les cas Edge lors du survol de l'élément a et non directement sur le div.

2
Omri Aharon

Obtenez la position de l'élément au survol de la souris, 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 voulez pas l'appliquer uniquement sur div wrapper mais sur toute la fenêtre/le document, vous pouvez remplacer le wrapper par la fenêtre/le document

 $(window).mouseover(function(e){});
1
Ankur Aggarwal

cela devrait fonctionner:

définir une classe dans votre feuille de style:

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

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

puis dans votre js:

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

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

" Violon 1 "

Avec un peu plus de détails. Cela n'apparaîtra comme vrai qu'après avoir pris le chemin direct de a à div. (Le tout petit espace blanc entre a et div.) Comme dans:

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

" Violon 2 "

Pourrait tenir. Cela apparaîtra également comme vrai si l'on va dans le petit espace blanc entre a et div, puis revenir à div. Un péché:

  • 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 (c.x >= d1.x + d1.w && c.y >= d1.y && c.y <= 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" );
});
0
user13500