Establecer a: hover basado en clase

Tengo el siguiente HTML:

 

En CSS, quiero establecer el a:hover para estos elementos de menú a un color en particular. Entonces escribo:

 .menu a:hover { color:#DDD; } 

Pero, quiero establecer este a:hover color de a:hover solo para esas tags con el elemento de navegación principal de clase y no el elemento de navegación principal-actual , porque tiene un color diferente y no debería cambiar al colocar el cursor . Todas las tags dentro del menú div deberían cambiar de color al pasar el mouse, excepto el que tiene la clase actual .

¿Cómo puedo hacerlo usando CSS?

Intenté algo así como

 .menu a:hover .main-nav-item { color:#DDD; } 

pensando que solo aquellos con clase main-nav-item cambiarán el color al pasar el mouse, y no el actual. Pero no está funcionando.

Prueba esto:

 .menu a.main-nav-item:hover { } 

Para entender cómo funciona esto, es importante leer esto como lo hace el navegador. El a define el elemento, el elemento .main-nav-item califica el elemento solo para aquellos que tienen esa clase, y finalmente el elemento emergente clase-pseudo se aplica a la expresión calificada que viene antes.

Básicamente se reduce a esto:

Aplique esta regla de desplazamiento a todos los elementos de anclaje con la clase main-nav-item que sea descendiente de cualquier elemento con el menu clase.

Cascading te está mordiendo. Prueba esto:

 .menu > .main-nav-item:hover { color:#DDD; } 

Este código dice que debe capturar todos los enlaces que tienen una clase de artículo de navegación principal Y son elementos secundarios del menú de clase y aplicar el color #DDD cuando están suspendidos.

Un error común es dejar un espacio antes de los nombres de las clases. Incluso si esta fuera la syntax correcta:

 .menu a:hover .main-nav-item 

nunca hubiera funcionado.

Por lo tanto, no escribirías

 .menu a .main-nav-item:hover 

podría ser

 .menu a.main-nav-item:hover 

¿qué tal .main-nav-item:hover

esto mantiene la especificidad baja

simplemente puede intentar:

 a.main-nav-item:hover { }