CODEWITHSUNDEEP
jqueryhover
TheSystem
TheSystem

Reputation: 1119

Jquery hover on elements with children

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

Upvotes: 5

Views: 12285

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196236

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/

Upvotes: 12

Related Questions