jQuery/JS mouseover beperken tot 1 element

[Verwijderd]

Ik probeer in een uitgebreide list een mouseover af te handelen door middel van de hover() functie van jQuery. Het probleem is echter dat ik het niet voor elkaar krijg om de mouseover tot 1 enkel <li> te beperken, alle 'parent' li's worden ook getriggerd.

HTML:

<ul>
    <li>Bla</li>
    <li>Bla
        <ul>
            <li>Bla</li>
            <li>Bla</li>
        </ul>
    </li>
    <li>Bla
        <ul>
            <li>Bla
                <ul>
                    <li>Bla</li>
                    <li>Bla</li>
                </ul>
            </li>
            <li>Bla</li>
            <li>Bla</li>
        </ul>
    </li>
</ul>

JavaScript:

$(document).ready(function() {
    $('li').hover(
        function(e) {   // mouseover
            $(this).css('background-color', 'red');
        },
        function(e) {   // mouseout
            $(this).css('background-color', 'blue');
        }
    );
});

Ik heb in de javascript al geprobeerd de event te stoppen met .stopPropagation() en false te returnen, maar nog steeds worden alle li-parentnodes getriggerd. Hoe kan ik zorgen dat ik enkel de LI pak waar de muis daadwerkelijk over of out gaat?

[wackmaniac]

Is het een optie om de li's die je wilt triggeren een class mee te geven? Dan ben je vrij snel van het probleem af:

JavaScript:

$$('li.hoverable').each( function( element ) {
  //doe je ding
});

Is wel Prototype-code uit het blote hoofd, maar het idee is volgens mij wel duidelijk.

[storeman]

Dat lijkt me ook niet meer dan logisch, je past je mouse-event toe op alle ListItems. Je zult inderdaad met een class moeten gaan werken, of met een uitgebreidere selector.

$$('ul li ul li')

Al lijkt een class mij een betere oplossing.

[Verwijderd]

De bedoeling is ook dat alle li's mouseover gedrag vertonen, alleen het probleem is dat hoger gelegen li's nu ook getriggerd worden wanneer en childnode gehoverd worden. Mijn bedoeling is dus dat er maar 1 per keer word getriggerd en niet de node + al zijn parents.
Zoals ik nu het hover gedrag toepas zorgt al dat de siblings niet reageren bij een hover, dus mij lijkt dat daar het probleem niet ligt?

[crisp]

Dat heeft puur te maken met de bubbling behaviour van events; je zal met behulp van de target/srcElement property van je event-object moeten kijken welk element precies het event triggerde.

[Kiphaas7]

http://www.jqueryhelp.com/viewtopic.php?p=3437

Dat al gelezen? Lijkt veel op jouw probleem...