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?

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

Answer 2

you can give a try to this:

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

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

Answer 4

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.

Answer 5

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

Answer 6

this should work:

define a class in your style sheet:

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

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

then in your js:

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

Answer 7

All depending on how you want it. This could also be an option:

»Fiddle 1«

With some more detail. This will only show as true after taking the direct path from a to div. (The tiny white space between a and div.) As in:

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

»Fiddle 2«

Might hold up. This will also show as true if one go to the tiny white space between a and div, and then go back to div. As in:

• 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" );
});

Answer 8

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

Answer 9

jsfiddle

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