1

Necesito ayuda para seleccionar un elemento HTML para darle estilos con css. Mi problema radica en que necesito seleccionar un "li" que tiene un cierto atributo, pero lo necesito con la pseudoclase "hover".

El código HTML que tengo es el siguiente:

<ul class="menu">
   <li id="menu-item-15" class="menu-item current-menu-item menu-item-home menu-item-15"><a href="/inicio">Inicio</a></li>
</ul>

Lo intenté seleccionar de la siguiente manera pero no me funcionó.

ul li[class*="current-menu-"]:hover a{
color:#ffffff;
}

No tengo idea como seleccionar el elemento puesto que necesito seleccionarlo con el atributo indicado y con el estado o pseudoclase "hover".

Espero puedan ayudarme. De antemano Muchas Gracias.

7
  • Por favor, coloca el fragmento html del elemento que deseas seleccionar.
    – Jaime
    Commented el 20 abr. 2022 a las 2:00
  • Es el que esta en la pregunta, en especifico intento darle estilos a un enlace "a", pero necesito que se aplique ese estilo sólo cuando el item del menu este activo (con la clase "current-menu"). Para explicarlo mejor. Tengo un menú, selecciono UL para especificar (pues no quiero que se aplique a otros menu con clases diferentes), luego indico el LI, pero cuando tenga la clase "current-menu" y que a la vez este en el estado hover para de esta manera llegar al enlace y aplicarle el color blanco.
    – Daniel
    Commented el 20 abr. 2022 a las 2:06
  • 1
    Se entiende lo que quieres, pero ¿cómo te van a ayudar con el código de un selector si no pones cómo luce lo que quieres seleccionar?
    – Jaime
    Commented el 20 abr. 2022 a las 2:14
  • Ya edite la pregunta con el código HTML, espero puedas ayudarme
    – Daniel
    Commented el 20 abr. 2022 a las 2:26
  • 1
    ¿Probaste usar algo cómo ul li.current-menu-item a:hover{ // tu código}?
    – Jaime
    Commented el 20 abr. 2022 a las 2:30

1 respuesta 1

2
ul li.menu-item:hover
 { 
   color:#ffffff;
 }

Para este caso, la etiqueta <a> solo la usas para el enlace, y lo que que quieres colorear es todo el <li> cuando pase cursor por encima.

1
  • Corregido para limitarme a tu pregunta, y corregir la clase apropiada de modo que todo el menú funcione igual, no solo menu-current-item
    – DEVX75
    Commented el 20 abr. 2022 a las 3:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.