使用 jQuery，我如何检测元素是否被“鼠标悬停”？以及该元素的任何子元素？

Question

这是我到目前为止所拥有的：

var hoveredElement; //none per default

;(function($){
$.fn.isHovered = function(){
    return (hoveredElement.length && $( this )[0] === hoveredElement[0] );
};

})(jQuery);


$(document).mouseover( function(e){
    hoveredElement = $(e.target);
});


$(document).mouseover( function(e){
    console.log( $(this).isHovered() );
});

基本上我有以下结构：

<div id='one'>
    <div id="two">
        <div id="three">
            three
        </div>
    </div>
</div>

当我将鼠标悬停在 2 上时，我想返回 true，无论我将鼠标悬停在 #two 还是 #third 上。

我该如何做到这一点？

Answer 1

使用 jQuery .hover() API：http://api.jquery.com/将鼠标悬停/，您应该能够通过$(this)查看当前对象。

像这样的东西：

$('div').hover( 
function() { console.log('hovering over %o', $(this) }, 
function() { console.log('leaving') }
);

Answer 2

尝试查看 mouseenter 和 mouseleave 它应该给你你正在寻找的东西

Answer 3

您的代码在这里工作： http://jsfiddle.net/maniator/LjUu7/2/