Pregunta de Javascript / Jquery Tree Travesal - javascript, jquery, html, tree, travelling

Supongamos que tengo los siguientes

<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub Item</li>
</ul>
</li>
<li>Item 3</li>
</ul>

Esta lista es generada automáticamente por algún otro código(por lo tanto, agregar la identificación exclusiva "s / class" está fuera de la cuestión. Supongamos que tengo un código jquery que establece que si mouse sobre un li, obtiene un color de fondo. Sin embargo, si mouse sobre el elemento de lista "Sub Item", El "Elemento 2" también se resaltará. ¿Cómo puedo hacerlo para que si el usuario pasa el mouse sobre "Sub Elemento", solo ponga un color de fondo en eso y no en el "Elemento 2" también?

También olvidé mencionar que ya tengo algo como $ ("li"). DoSomething ... en la página ya ...

Respuestas

Primero, necesitará un poco de CSS, una clase de desplazamiento y un fondo en el <li> elementos, por lo que el fondo del padre no aparece en los hijos (porque de lo contrario tienen un fondo transparente, así que lo que sea que muestre el padre), de esta manera:

​.hover { background: #ddd; }
li { background: #fff; }

Entonces puedes usar mouseover y mouseout (no mouseenter y mouseleave me gusta .hover() usos), así:

$("li").mouseover(function(e){
$(this).addClass("hover").parents().removeClass("hover");
e.stopPropagation();
}).mouseout(function(){
$(this).removeClass("hover");
});​

Puedes ver una demostración de trabajo aquí.. Esto utiliza .mouseover() y .mouseout() (por lo que se dispara al entrar / salir de un elemento hijo, que mouseenter/mouseleave específicamente ganó "t). Al pasar el ratón aplicamos el hover clase a la actual <li> y elimine la clase de cualquier padre que pueda tenerla. También evitamos que el evento burbujee con event.stopPropagation() así que no sucede lo mismo en los padres de este elemento ... solo comente esto en la demostración para ver cómo esto afecta las cosas :)

Al aire libre

pruebe $ ("ul li li") como su selector. ES DECIR

ul li li:hover {background:#00F;}

EDITAR

Para una solución JQuery, es el mismo selector. IE

`$ (" ul li li "). css (" fondo "," # 00F ");