How can I find current element on mouseover using jQuery?

Question

How can I get the class name of the current element that is on mouseover? For example

When a mouse is over from div to a, I want to get the class name of a div element. How can I get it using jQuery?

Solution 1

This is my 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);

Working fiddle: 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>

Solution 2

you can give a try to this:

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

Solution 3

Do you want the class name of the div on which the mouseover event occurs? If that is the case then refer this,

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

I have used mouseover event with target

e.target gives the element on which that event occurs

If you want to get the class name of div after leaving the mouse from it then use "mouseleave" event instaed of "mouseover"

Solution 4

Get the position of element on mouseover and then get the class name

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

If you don't want to apply this only on wrapper div but on whole window/document, then you can replace wrapper with window/document

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

Solution 5

What most people have neglected is this request from the OP:

When mouse over div from a

Meaning you need to know you've hovered from a specific type of element, not just from any element.

I made a global var, changing to true on the mouseleave of specific elements, in your case an a element. Then, inside the hover function you need to check that it's true.

Here's a Demo

Edit: Updated fiddle demo with edge cases when hovering from a element not directly onto the div.

View more solutions

Comments

[V31]

can you create a fiddle to elaborate on your issue?

[Huangism]

Post your html and what you have so far

[bto.rdz]

one way, maybe not the best one is to create a style that is assigned at hover, then find for the element that have that style

[Hackerman]

jsfiddle.net/roXon/dJgf4

[midstack]

@Robert Rozas thank you

[Hackerman]

@midstack i'm glad to help :)

[midstack]

@RobertRozas Can you write this as answer please?

[silencedmessage]

This would give you any element inside wrapper, not just the divs in question.