javascript - hovered - mouseover vs mouseenter




How can I find current element on mouseover using jquery (6)

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

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


jsfiddle

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

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

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>

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

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.


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




mouseout