Как я могу найти текущий элемент при наведении курсора мыши с помощью jQuery?

Ответ 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

вы можете попробовать:

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

Ответ 3

Вы хотите, чтобы имя класса div, на котором произошло событие mouseover? Если это так, ссылайтесь на это,

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"

Ответ 4

То, что большинство людей пренебрегают, - это запрос от OP:

When mouse over div from a

Значение вам нужно знать, что вы зависали от определенного типа элемента не только из любого элемента.

Я сделал глобальный var, изменив значение true на mouseleave определенных элементов, в вашем случае - элемент a. Затем внутри функции наведения вам нужно проверить, что это правда.

Здесь Демо

Изменить: Обновлен демонстрационный скрипт с красными случаями при наведении курсора из элемента a непосредственно на div.

Ответ 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){});

Ответ 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

Все зависит от того, как вы хотите. Это также может быть вариант:

" Fiddle 1"

С более подробной информацией. Это будет отображаться только как истина после перехода от a до div. (Маленькое пустое пространство между a и div.) Как в:

• a → div ИСТИНА
• a → div → white space in between → div FALSE

" Fiddle 2"

Может задержать. Это также будет отображаться как истинное, если перейти к маленькому пробелу между a и div, а затем вернуться к div. Как в:

• a → div → white space in between → 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" );
});

Ответ 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>

Ответ 9

jsfiddle

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