Hola @masantosmeca
En el CSS que se encarga de cambiar el color cuando esta en hover (:hover), tienes que añadir el focus (:focus).
Viendo tu codigo, yo lo simplificaria utilizando una class en el p donde tienes todos los enlaces, por ejemplo:
p.social-links a:hover, p.social-links a:focus { color: #66a7ff }
Saludos
Iniciador del debate
M. Santos
(@masantosmeca)
no ha funcionado en cuanto a la selección con el teclado, parece que en ese caso selecciona el fondo del icono (con una outline) ¿?
Hola @masantosmeca
Por lo que veo tienes definido tanto en a como en i el color, por lo tanto deberia funcionarte lo siguiente:
p.social-links a:hover,
p.social-links a:focus,
p.social-links a:focus-visible,
p.social-links a:hover i,
p.social-links a:focus i,
p.social-links a:focus-visible i {
color: #66a7ff;
outline: none; /** Elimina el outline */
}
Las tres primaras son para definir el color del enlace y las otras tres para que el i (icono) tenga el mismo color.
El foco se hace en elemento a solamente pero como tambien tienes definido un color para i es necesario especificarlo.
Iniciador del debate
M. Santos
(@masantosmeca)
he probado con eso y con:
p.social-links a:hover,
p.social-links a:focus,
p.social-links a:focus-visible,
p.social-links a:hover i,
p.social-links a:focus i,
p.social-links a:focus-visible i {
color: #66a7ff !important;
outline: none !important;
}
pero sigue igual ¿?
