CODEWITHSUNDEEP
javascriptjquerymouseevent
rookian
rookian

Reputation: 1064

Mouseover on child element, not on parent

I'm implementing a highlight feature, which highlights the current hovered div and i have html structure something like this:

<div> <!-- this is the parent -->
    <div> content ... </div><!-- a child -->
    <div> content ... </div><!-- another child-->
</div>

how it should work: - if i hover over the parent, then it should highlight the parent element. - if i hover over a child element, the parent element's highlighting should fade and it should only highlight the child element

i'm using jquerys' mouseenter and mouseleaves events for that, the code looks like this (actually its a bit different because im working with gwt and the native javascript interface, but it works the same way):

$(element).mouseenter(function(event)
{
    showHighlightContainer();
});

$(element).mouseleave(function(event)
{
    hideHighlightContainer();
});

the problem is: when i hover over the parent element, the element is beeing highlighted and everything is fine. but when i hover over a child element, the child elemend AND the parent element are highlighted.

am i using the wrong mouse events? how could i solve that?

Upvotes: 4

Views: 6279

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You need to use mouseover and mouseout

$(element).mouseover(function (event) {
    event.stopPropagation();
    showHighlightContainer();
}).mouseout(function (event) {
    event.stopPropagation();
    hideHighlightContainer();
});

Demo: Fiddle

Upvotes: 13

Related Questions