JQuery schweben auf Elemente mit Kindern

Question

Ich habe diesen 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 
}); 

Also, was ich versuche zu tun ist, wenn ich das letzte Element schweben oder zweiten oder dritten ... alle die Eltern nicht schweben ....

Nur das erste Element hat ein diferent Klassennamen und es gibt keine Begrenzung für Kinder ....

Dank

Answer 1

Verwenden event.stopPropagation() das Ereignis aus sprudeln zu stoppen ..

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

---

aktualisieren

Je nach dem tatsächlichen Effekt, den Sie erreichen wollen, müssen Sie möglicherweise die .mouseover() und .mouseout() Methoden statt .hover() verwenden, die verwendet (.mouseenter() und .mouseleave()). Der Unterschied kann in dieser Demo http://jsfiddle.net/gaby/Zse5V/

gesehen werden