Question

I have two divs:

<div class="outer">
    <div class="inner">Example</div>
</div>

And I have a jQuery function:

$(function(){
    $('.outer').mouseout(function () {
        $('.outer).attr("style", "background-color: white");
    });

    $('.outer').mouseover(function () {
        $('.outer).attr("style", "background-color: red");
    });

    $('.inner').mouseout(function () {
        $('.inner).attr("style", "background-color: white");
    });

    $('.inner').mouseover(function () {
        $('.inner).attr("style", "background-color: red");
    });
});

When I hover over the “outer”, the background of the outer is colored red (good!). When I hover the inner, the inner AND outer are colored red… Not good.

The idea is also for the click-event. When I add some click-functions to the jQuery functions and I click the inner div, the script clicks inner and outer div.

I only want one div set to red, not both when I hover the inner. Also for the future, i want to use this functionality for the click-event.

I think this is really simple, but I can’t figure it out somehow 🙁

Who can help me?

Thanks in advance

Answer 1

I think you are looking for stopPropagation event method, it:

Prevents the event from bubbling up the DOM tree, preventing any
parent handlers from being notified of the event.

So the solution can be as follows:

$(".inner").hover(function(e) {
    e.stopPropagation();
    $(this).attr("style", "background-color: red");
}, function(e) {
    e.stopPropagation();
    $(this).attr("style", "background-color: white");
});

DEMO: http://jsfiddle.net/TZjpT/