Jquery hover on elements with children

Question

I have this code:

<div class"classNameFather">
    <div class="className">
        <div class="className">
             <div.... (unlimited elements)
        </div>
    </div>
</div>

$('.className').hover(function() {
    //do hover stuff
}, function() {
    //do mouseout stuff
});

$('.classNameFather').hover(function() {
    //do hover stuff
}, function() {
    //do mouseout stuff
});

So what I'm trying to do is when i'm hover the last element or second or third... all the parents are not hover....

Only the first element has a diferent class name and there is no limit for children....

Thanks

Answer 1

Use event.stopPropagation() to stop the event from bubbling up..

$('.className').hover(function(e) {
    e.stopPropagation();
    //do hover stuff
}, function(e) {
    e.stopPropagation();
    //do mouseout stuff
});

$('.classNameFather').hover(function(e) {
    e.stopPropagation();
    //do hover stuff
}, function(e) {
    e.stopPropagation();
    //do mouseout stuff
});

---

Update

Depending on the actual effect you want to accomplish, you might need to use the .mouseover() and .mouseout() methods instead of .hover() which uses (.mouseenter() and .mouseleave()).

The difference can be seen in this demo http://jsfiddle.net/gaby/Zse5V/