2

Tengo un pequeño menú de CSS con una lista numerada y me encuentro con dos siguiente problema:

  1. Quiero que al pasar el cursor por el texto del link se cambié el color no sólo del texto sino también del número que le precede. Esto lo consigo pero con el problema que si paso el cursor por el número solo se cambié el color del número y no el del link asociado. ¿Hay forma de conseguir esto en CSS?

  2. ¿Es posible aplicar un estilo variable mediante un hover a un link en función de si ese link tiene el foco o no?. EL objetivo es evitar el problema visual (debido a los colores) que tengo en mi ejemplo cuando un link toma el foco y posteriormente al pasar el cursor sobre le afecta el hover definido.

<!DOCTYPE html>
<html lang="en">
    <head>
            <meta charset="utf-8">
            <title>Inicio</title>
            
            <style>
            
            #nav-aside ul li {
                        list-style-type: decimal;
                    
                    }
                    
            #nav-aside ul li a {
                color:black;
                text-decoration: none;
            
            }
            
            #nav-aside ul li:hover{
                        color:#a64cff;
                    }
                    
                #nav-aside ul li a:hover{
                            color:white;
                            background-color:#a64cff;
                } 
                    
                #nav-aside ul li a:focus{
                            color:#a64cff;
                            font-style: italic;
                } 
                

        
            </style>
            
        </head> 
    <body>
        <nav id="nav-aside">
          <ul>
     
               <li><a href="javascript:LeerArchivoTXT('FicheroTexto.txt')">Extraer Datos fichero texto</a></li>
               <li><a href="javascript:LeerArchivoXML('DatosAgenda.xml')">Extraer datos fichero XML</a></li>
          </ul>
         </nav>
    </body> 
</html>

2 respuestas 2

1

Problema # 1:

Quiero que al pasar el cursor por el texto del link se cambié el color no sólo del texto sino también del número que le precede.

El problema se debe a solo estas cambiando los estilos a los a cuando se hace hover sobre estos y no cuando se hace hover sobre el li

Solución:

Cambiar esta regla #nav-aside ul li a:hover a #nav-aside ul li:hover a

Demo:

#nav-aside ul li {
  list-style-type: decimal;
}

#nav-aside ul li a {
  color: black;
  text-decoration: none;
}

#nav-aside ul li:hover {
  color: #a64cff;
}

#nav-aside ul li:hover a { /* ACA modificamos la regla */
  color: white;
  background-color: #a64cff;
}

#nav-aside ul li a:focus {
  color: #a64cff;
  font-style: italic;
}
<nav id="nav-aside">
  <ul>
    <li><a href="javascript:LeerArchivoTXT('FicheroTexto.txt')">Extraer Datos fichero texto</a></li>
    <li><a href="javascript:LeerArchivoXML('DatosAgenda.xml')">Extraer datos fichero XML</a></li>
  </ul>
</nav>


Problema #2:

¿Es posible aplicar un estilo variable mediante un hover a un link en función de si ese link tiene el foco o no?

Si, simplemente hay que crear una regla para cuando el elemento tiene ambos estados, es decir #nav-aside ul li a:hover:focus

Demo:

#nav-aside ul li {
  list-style-type: decimal;
}

#nav-aside ul li a {
  color: black;
  text-decoration: none;
}

#nav-aside ul li:hover {
  color: #a64cff;
}

#nav-aside ul li:hover a {
  color: white;
  background-color: #a64cff;
}

#nav-aside ul li a:focus {
  color: #a64cff;
  font-style: italic;
}

#nav-aside ul li a:hover:focus { /* ACA Ambos selectores */
  color: white;
}
<nav id="nav-aside">
  <ul>
    <li><a href="javascript:LeerArchivoTXT('FicheroTexto.txt')">Extraer Datos fichero texto</a></li>
    <li><a href="javascript:LeerArchivoXML('DatosAgenda.xml')">Extraer datos fichero XML</a></li>
  </ul>
</nav>


Bonus

Cuando un a tiene foco, el número del li no cambia de color. Esto se puede corregir si "convertimos" li en elementos focusable y para esto tenemos que:

  • Agregar el atributo tabindex a los li
  • Sacar el href a los a
    Dado que en realidad se ejecuta un JS podemos poner esta acción como onclick en los li
  • Reemplazar la regal #nav-aside ul li a:focus, por #nav-aside ul li:focus, #nav-aside ul li:focus a

Demo:

#nav-aside ul li {
  list-style-type: decimal;
  cursor: pointer;
}

#nav-aside ul li a {
  color: black;
  text-decoration: none;
}

#nav-aside ul li:hover {
  color: #a64cff;
  background-color: #a64cff;
}

#nav-aside ul li:hover a {
  color: white;
}

#nav-aside ul li:focus,
#nav-aside ul li:focus a {
  color: #a64cff;
  font-style: italic;
}

#nav-aside ul li:hover:focus a {
  color: white;
}
<nav id="nav-aside">
  <ul>
    <li tabindex="0" onclick="javascript:LeerArchivoTXT('FicheroTexto.txt')"><a>Extraer Datos fichero texto</a></li>
    <li tabindex="0" onclick="javascript:LeerArchivoXML('DatosAgenda.xml')"><a>Extraer datos fichero XML</a></li>
  </ul>
</nav>

0
0

1.- Dale al estilo de la lista: list-style:none y añade el número en la lista (rápido), sino añádele un div padre al li y le haces el hover a este div (lento).

    <li><a href="javascript:LeerArchivoTXT('FicheroTexto.txt')">1 Extraer Datos fichero texto</a></li>
    <li><a href="javascript:LeerArchivoXML('DatosAgenda.xml')">2 Extraer datos fichero XML</a></li>
    

2.- Puedes probar a darle un color a la propiedad a:active para cuando hayas clickado en el elemento de la lista o bien darle color a la propiedad a:focus para que al hacer click cambies el color.

Espero haberte ayudado, un saludo.

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.