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

Posted 2023-02-22

【中文标题】如何使用 jQuery 在鼠标悬停时找到当前元素？

【英文标题】：How can I find current element on mouseover using jQuery?

【发布时间】：2014-03-21 15:46:00

【问题描述】：

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

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

【问题讨论】：

你能创建一个小提琴来详细说明你的问题吗？

发布您的 html 以及您目前拥有的内容

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

jsfiddle.net/roXon/dJgf4

@Robert Rozas 谢谢

【参考方案1】：

这是我的版本：

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/

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>

【参考方案2】：

你想要鼠标悬停事件发生的 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”

【参考方案3】：

一切都取决于您想要的方式。这也可能是一种选择：

»Fiddle 1«

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

a -> div 是的 a -> div -> white space in between -> div FALSE

»Fiddle 2«

可能会坚持下去。如果前往a 和div 之间的微小空白区域，然后返回div，这也将显示为true。如：

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

【参考方案4】：

你可以试试这个：

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

【参考方案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));

【讨论】：

这将为您提供wrapper 中的任何元素，而不仅仅是相关的 div。

【参考方案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
)

【参考方案7】：

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

When mouse over div from a

意味着您需要知道您已经从特定类型的元素中悬停，不仅仅是从任何元素。

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

这是Demo

编辑：当从a 元素悬停不直接到div 时，更新了带有边缘情况的小提琴演示。

【参考方案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>