css focus no funciona en safari y cromo

Tengo un problema extraño que nunca antes tuve. Por favor, vea este código:css focus no funciona en safari y cromo

El css:

#btn{ 
    margin-left:150px; 
    padding:10px; 
    display:block; 
} 
#btn a{ 
    padding:5px 20px; 
    background:green; 
    color:#FFF; 
    text-decoration:none; 
    outline:none; 
} 
#btn a:hover{ 
    background:#933;  
} 
#btn a:focus, #btn a:active{ 
    background:#CF0; 
color:#000;

}

Aquí el código HTML

<div id="btn"> 
    <a href="#">Click here</a> 
</div>

El enfoque y activa CSS funciona bien en Firefox, pero no en el cromo y el safari.

Fuente

2011-04-29 user687414

: focus es como el estado del teclado para: hover. Sucede cuando un elemento tiene foco, y antes de "hacer clic" en el elemento con la barra espaciadora o presionar la tecla ENTER. Entonces sería: activo. – Benxamin

Este es también el caso de los eventos de 'enfoque' basados en Webkit, pero no es así. La solución es poner un atributo tabindex = "0" en la A y luego recibe el evento de enfoque. También es posible que desee tener al menos un "#" como href por las dudas.

Fuente

2011-11-11 00:10:36 user1040252

Parece que no funciona para '

Sí parece un pequeño problema con el foco en webkit. No es realmente un error. Fácilmente reparable en html. Solo usa tabindex.

 <a href="#" class="hide" tabindex="1">[hide]</a> 
    <a href="#" class="show" tabindex="2">[show]</a>

da ta ...

Fuente

2012-03-21 04:05:26 shobhonk

Si bien aprecio su ingenio, esto es descuidado para cualquier elemento que no sea un elemento de interfaz de usuario "ocultar" y "mostrar". Estoy buscando esto específicamente para el diseño de elemento de entrada, por lo que no es exactamente lo mismo que el OP. Aún así, esto funcionaría, supongo. – Luke

Esto funcionó perfectamente para mí. ¡Gracias! – kingliam

La solución Publicado por user1040252 hizo el truco para mí.

Tengo un div con imágenes que establece una imagen en una etiqueta span para que se vea con un clic. Firefox ignora el nombre de clase: focus en mi archivo CSS.

<div class="thumbnail_frame"> 
<img src="pictures\\figures\\thumbs\\image_1.JPG"/> 
<span> 
    <img src="pictures\\figures\\image_1.JPG"/> 

</span> 
</div>

Mi CSS (parte de ella):

.thumbnail_frame:focus span{visibility: visible;} 
//... 
.thumbnail_frame span 
{ 
    visibility: hidden; 
    position: fixed; 
    top: 20px; 
    left: 20px 
}

Pero esto sólo funcionaba en internet Exporer 9. Firefox 12 mantienen ignorando el foco también en otros ejemplos simples como encontrar aquí: explicación: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm Inténtelo: http://de.selfhtml.org/css/eigenschaften/anzeige/pseudo_links.htm

embargo, la adición tabindex = "0", como en

<div tabindex="0" class="thumbnail_frame"> 
<img src="pictures\\figures\\thumbs\\image_1.JPG"/> 
    <span> 
     <img src="pictures\\figures\\image_1.JPG"/> 

    </span> 
    </div>

funciona como un encanto. Un clic abre el lapso oculto, y el segundo lo cierra muy bien.

Fuente

2012-08-28 13:01:13

-2

Usted debe saber que la pseudo clase: enfoque no va con A. Una etiqueta tiene 4 clases seudo:: link,: flotar, activo,: visited

Fuente

2013-04-23 11:20:18 Ismail

En todos los navegadores, puede: centrarse en las etiquetas A (con un href válido) para habilitar la compatibilidad con el teclado. – Benxamin

Es corregible, código adicional necesario aunque ...

<div id="btn"> 
    <a href="#" tabindex="1">Click here</a> 
</div>

jsfiddle

sé que es ridículo ... puede leer más here

esperanza esto ayuda

Fuente

2014-07-19 16:00:53 calofanas

Muchas gracias calofanas. ¡Esto hizo el truco para Safari 7.1.5! – apo11oCreed

css focus no funciona en safari y cromo

Respuesta

Cuestiones relacionadas