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 <

Answer 1

you can give a try to this:

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

Answer 2

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 3

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 4

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

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