With jQuery, how do i detect if an element is 'mouseovered' and any child elements of that element?

Here is what I have so far:

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

Basically I have the following structure:

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

When I mouse over two, i'd like to return true whether it is #two or #three that I am mousing over.

How do i accomplish this?

Use the jQuery .hover() API: http://api.jquery.com/hover/ and you should be able to view the current object via $(this).

Something like:

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

Try to look into mouseenter, and mouseleave it should give you what you are looking for

Your code works here: http://jsfiddle.net/maniator/LjUu7/2/