Ya que está todo publicado, lo prometido es deuda...
En el menú de la web:
Soluciones Web por Aresillo
tengo este código para el hover, es decir, cuando pasas el ratón:
Código:
#menu li a:hover, #menu li a:active, #menu li a:focus {
background: url(images/menuhover.jpg) repeat-x;
outline:0;
}
Quiere decir que cuando pases el ratón por encima de los a (enlaces) que haya en los li (elementos de una lista) del menu y lo mismo para cuando el enlace esté activo y enfocado, entonces se aplicará esto:
- un background
- un outline:0; no se verá recuadro de puntitos cuando se enfoca el enlace...
En este caso he quitado el outline porque lo he sustituido por un efecto poniéndole fondo y cuando haces foco, se sabe donde estás en la página..
En cambio en la sección de validaciones, tengo puesto el outline porque no hace ningún efecto más al pasar el ratón o al hacer foco, y si se lo quito una persona que navegue sin ratón no sabría donde se encuentra de la página...
En los enlaces a otros diseños de abajo de la web, tampoco he puesto outline porque hace el efecto de que sale la casilla con el nombre y entonces al navegar sin ratón se sabrá donde se está porque van saliendo los nombres... el código era este:
Código:
.subcaja:hover span,.subcaja:focus span, .subcaja:active span {
visibility: visible;
bottom: 5px;
left: 0;
}
Es decir, que aparte del hover, también dices que lo haga en el active y en el focus. En este caso era un span. y por eso que en este código lo posicione y lo haga visible..
Por todo esto, es por lo que recomiendo hacer un uso responsable del outline, porque ultimamente se tiende a quitarlo para toda la web cuando es muchos casos no es necesario estéticamente y encima perjudica la accesibilidad de la web.
Un saludo!!
Ares