html - china - didi uber

¿Cómo desplazarse solo li actual en ul anidado?

Question

Tengo una lista anidada

li:hover {
  background-color: lightgray;
}
ul li ul li:hover {
  font-weight: bold;
}

<ul>
  <li>fnord
    <ul>
      <li>baz</li>
      <li>foo
        <ul>
          <li>baz</li>
          <li>foo</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>gnarf
    <ul>
      <li>baz</li>
      <li>foo
        <ul>
          <li>baz</li>
          <li>yolo</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

El problema es que, fnord foo también pasará sobre fnord y todos sus elementos. ¿Cómo solo sobrevoco el límite de mi ratón?

La anidación es variable y puede, en teoría, ser interminable.

Configuré un JsFiddle .

Answer 1

¿Entonces solo quieres apuntar directamente a un li? Prueba esto:

 ul li ul li:hover{
    background-color: red;
}

Demo aquí

Editar

También agregué otro EJEMPLO de donde el menú podría seguir expandiéndose.

Answer 2

Use este selector para desplazarse

ul ul li:hover {}

• solo puede estilizar elemento con foo

Answer 3

La solución para los subelementos y también para los padres es posible sin javascript, cuando agregará algún elemento en línea, que activará el estado de desplazamiento.

<ul>
    <li><span>fnord</span>
        <ul>
            <li><span>baz</span></li>
            <li><span>foo</span>
                <ul>
                    <li><span>baz</span></li>
                    <li><span>foo</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul> 

CSS

li>span:hover {
   background-color: lightgray;
   font-weight: bold;    
}

JsFiddle aquí.

Answer 4

Creo que lo más cercano que se puede hacer con CSS es quitar el estilo de vuelo de los niños de los elementos suspendidos ... lo que no ayuda a los padres. VIOLÍN

li:hover {
    background-color: lightgray;
}
li:hover {
    font-weight: bold;    
}
li:hover ul {
    background-color: white;
    font-weight: normal;
}

La respuesta aceptada en el duplicado que encontraste es la mejor manera que he visto de hacer esto con javascript, usando e.stopPropagation: Cascading <li> -hover effect using CSS

FIDDLE de respuesta desde allí. Sin embargo, querrás ser más específico que ''all lis'' en ese selector.

$(''li'').mouseover(function(e)
{
    e.stopPropagation();
    $(this).addClass(''currentHover'');
});

$(''li'').mouseout(function()
{
    $(this).removeClass(''currentHover'');
});