如何使用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/

 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 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給出了該事件發生的元素

如果你想在離開鼠標后得到div的類名，那么使用“mouseleave”事件安裝“mouseover”

Answer 4

大多數人忽視的是OP的要求：

When mouse over div from a

意思是你需要知道你是從特定類型的元素中徘徊， 而不僅僅是來自任何元素。

我創建了一個全局var，在特定元素的mouseleave上更改為true，在您的情況下是a元素。 然后，在懸停功能內部，您需要檢查它是否為真。

這是一個演示

編輯：從懸停時更新撥弄演示與邊緣的情況下a元素沒有直接到div 。

Answer 5

在mouseover上獲取元素的位置，然后獲取類名

<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

一切都取決於你想要的方式。 這也可以是一個選項：

» 小提琴1 «

有一些更詳細的信息。 這只會在從a到div的直接路徑后顯示為true。 （ a和div之間的微小空白區域。）如：

• a - > div TRUE
• a - > div - > white space in between - > div FALSE

» 小提琴2 «

可能會撐起來。 如果一個人去之間的微小的白色空間，這也將顯示為真a和div ，然后回去div 。 如：

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

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