如何使用jQuery在鼠标悬停时找到当前元素？

Question

如何获取鼠标悬停在当前元素上的类名？例如： 当鼠标从

移动到时，我想使用jQuery获取

元素的类名。如何实现？

- midstack

---

你能否创建一个 Fiddle 来详细说明你的问题？ - V31

发布你的 HTML 代码以及你目前已经完成的部分。 - Huangism

一种方法，也许不是最好的方法，是创建一个在悬停时分配的样式，然后查找具有该样式的元素。 - bto.rdz

http://jsfiddle.net/roXon/dJgf4/ - Hackerman

@RobertRozas，你能写成回答吗？ - midstack

Answer 1

你可以试试这个：

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

- Adesh Pandey

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

工作的 JSFiddle: 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>

- Hackerman

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

我已经使用了mouseover事件，搭配目标元素。

e.target可以获取事件发生的元素。

如果你希望在鼠标离开

元素后获取它的类名，那么请使用"mouseleave"事件，而不是"mouseover"。

- Snehal S

Answer 4

当鼠标悬停在元素上时，获取元素的位置和类名。

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

如果你不只想将这个应用于包装

，而是整个窗口/文档，则可以将wrapper替换为window/document。

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

- Ankur Aggarwal

---

这将为您提供wrapper内的任何元素，而不仅仅是所讨论的div元素。 - silencedmessage

Answer 5

大多数人忽略了OP的请求：

当鼠标悬停在div上时，意味着您需要知道您已经从特定类型的元素（而不仅仅是任何元素）悬停。

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

这是一个演示：Demo 编辑：更新了悬停在a元素上并不直接进入div时的边缘情况的演示。

- Omri Aharon

Answer 6

这取决于您的意愿。这也可以是一个选项：

»Fiddle 1«

提供更多细节。只有在从a到div的直接路径后才会显示为真。（a和div之间的微小空白区域。）如下所示：

• a -> div 真
• a -> div -> 中间的空白区域 -> div 假

»Fiddle 2«

可能会保持不变。如果一个人走到a和div之间的微小空白区域，然后回到div，这也将显示为真。如下所示：

• a -> div -> 中间有空格 -> 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" );
});

- user13500

Answer 7

这应该可以工作：

在您的样式表中定义一个类：

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

- bto.rdz

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>

- Netzach