如何使用jQuery在mouseover上找到当前元素？

Question

如何获取鼠标悬停时当前元素的类名？例如

当鼠标从div到 a 时，我想得到div元素的类名。我如何使用jQuery获取它？

Answer 1

你可以试试这个：

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

Answer 2

这是我的版本：

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

工作小提琴：http://jsfiddle.net/roXon/dJgf4/

＆＃13;

＆＃13;

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

＆＃13;

.el{
    width:200px;
    height:200px;
    margin:1px;
    position:relative;
    background:#ccc;   
    float:left;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您想要鼠标悬停事件发生的div的类名吗？ 如果是这种情况，请参考，

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

我已将鼠标悬停事件与目标

一起使用

e.target给出发生该事件的元素

如果要在离开鼠标后获取div的类名 然后使用“mouseleave”事件安装“mouseover”

Answer 4

大多数人忽略的是OP的要求：

When mouse over div from a

意思是你需要知道你是从一种特定类型的元素中徘徊，不只是来自任何元素。

我创建了一个全局var，在特定元素的mouseleave上更改为true，在您的情况下为a元素。然后，在悬停功能内部，您需要检查它是否为真。

这是Demo

修改：当从a元素悬停而不是直接转移到div时，更新了包含边缘案例的小提琴演示。

Answer 5

获取鼠标悬停时元素的位置，然后获取类名

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

如果你不想只在包装div上应用它，而是在整个窗口/文档上，那么你可以用窗口/文档替换包装器

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

Answer 6

这应该有效：

在样式表中定义一个类：

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

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

然后在你的js：

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

Answer 7

全部取决于您的需求。这也可以是一个选项：

»Fiddle 1«

有更多细节。这只会在从a到div的直接路径后显示为真。 （a和div之间的微小空格。）如：

• a - ＆gt; div正确
• a - ＆gt; div - ＆gt; white space in between - ＆gt; div错误

»Fiddle 2«

可能会举起来。如果进入a和div之间的微小空白区域，然后返回div，也会显示为真。如：

• a - ＆gt; div - ＆gt; white space in between - ＆gt; div正确

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

来自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'));
});