En Webkit en iPhone / iPad / iPod, especificar el estilo de una pseudoclase activa para una <a>etiqueta no se activa cuando toca el elemento. ¿Cómo puedo hacer que esto se active? Código de ejemplo:
<style>
a:active {
background-color: red;
}
</style>
<!-- snip -->
<a href="#">Click me</a>Respuestas:
<body ontouchstart="">
...
</body>Aplicado solo una vez, a diferencia de cada elemento de botón, parecía arreglar todos los botones de la página. Alternativamente, puede usar esta pequeña biblioteca JS llamada ' Fastclick '. Acelera los eventos de clic en dispositivos táctiles y también se ocupa de este problema.
Como han dicho otras respuestas, iOS Safari no activa la :activepseudoclase a menos que se adjunte un evento táctil al elemento, pero hasta ahora este comportamiento ha sido "mágico". Encontré esta pequeña propaganda en la Biblioteca de desarrolladores de Safari que lo explica (el énfasis es mío):
También puede usar la
-webkit-tap-highlight-colorpropiedad CSS en combinación con la configuración de un evento táctil para configurar los botones para que se comporten de manera similar al escritorio. En iOS, los eventos del mouse se envían tan rápido que nunca se recibe el estado inactivo o activo. Por lo tanto, el:activepseudoestado se activa solo cuando hay un evento táctil establecido en el elemento HTML, por ejemplo, cuando ontouchstart está configurado en el elemento de la siguiente manera:<button class="action" ontouchstart="" style="-webkit-tap-highlight-color: rgba(0,0,0,0);"> Testing Touch on iOS </button>Ahora, cuando se toca y se mantiene presionado el botón en iOS, el botón cambia al color especificado sin que aparezca el color gris transparente circundante.
En otras palabras, configurar un ontouchstartevento (incluso si está vacío) le dice explícitamente al navegador que reaccione a los eventos táctiles.
En mi opinión, este es un comportamiento defectuoso y probablemente se remonta a la época en que la web "móvil" era básicamente inexistente (eche un vistazo a esas capturas de pantalla en la página vinculada para ver a qué me refiero), y todo estaba orientado al mouse. Es interesante observar que otros navegadores móviles más nuevos, como los de Android, muestran el pseudo-estado `: active 'en el tacto muy bien, sin ningún tipo de trucos como los que se necesitan para iOS.
(Nota al margen: si desea usar sus propios estilos personalizados en iOS, también puede deshabilitar el cuadro gris translúcido predeterminado que usa iOS en lugar del :activepseudo-estado usando la -webkit-tap-highlight-colorpropiedad CSS, como se explica en la misma página vinculada arriba .)
Después de un poco de experimentación, la solución esperada de configurar un ontouchstartevento en el <body>elemento al que todos los eventos táctiles luego burbujean no funciona completamente. Si el elemento está visible en la ventana gráfica cuando se carga la página, entonces funciona bien, pero desplazarse hacia abajo y tocar un elemento que estaba fuera de la ventana gráfica no activa el :activepseudoestado como debería. Entonces, en lugar de
<!DOCTYPE html>
<html><body ontouchstart></body></html>adjunte el evento a todos los elementos en lugar de confiar en el evento que se propaga al cuerpo (usando jQuery):
$('body *').on('touchstart', function (){});Sin embargo, no estoy al tanto de las implicaciones de rendimiento de esto, así que tenga cuidado.
EDITAR: Hay una falla seria con esta solución: incluso tocar un elemento mientras se desplaza por la página activará el :activepseudoestado. La sensibilidad es demasiado fuerte. Android resuelve esto introduciendo una pequeña demora antes de que se muestre el estado, que se cancela si se desplaza la página. A la luz de esto, sugiero usar esto solo en elementos seleccionados. En mi caso, estoy desarrollando una aplicación web para usar en el campo que es básicamente una lista de botones para navegar por las páginas y enviar acciones. Debido a que la página completa es prácticamente botones en algunos casos, esto no funcionará para mí. Sin embargo, puede configurar el :hoverpseudo-estado para que lo complete. Después de desactivar el cuadro gris predeterminado, esto funciona perfectamente.
Agregue un controlador de eventos para ontouchstart en su etiqueta <a>. Esto hace que el CSS funcione mágicamente.
<a ontouchstart="">Click me</a>Esto funciona para mi:
document.addEventListener("touchstart", function() {},false);Nota: si hace este truco, también vale la pena eliminar el color de toque y resaltado predeterminado que aplica Mobile Safari usando la siguiente regla CSS.
html {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}A partir del 8 de diciembre de 2016, la respuesta aceptada ( <body ontouchstart="">...</body>) no me funciona en Safari 10 (iPhone 5s): ese truco solo funciona para aquellos elementos que eran visibles al cargar la página.
Sin embargo, agregando:
<script type='application/javascript'>
document.addEventListener("touchstart", function() {}, false);
</script>la headhace funcionar de la manera que quiero, con la desventaja de que ahora todos los eventos de toque durante el desplazamiento también desencadenan la :activepseudo-estado en los elementos tocados. (Si esto es un problema para usted, podría considerar la :hover solución alternativa de FighterJet ).
¿Estás usando todas las pseudoclases o solo una? Si está usando al menos dos, asegúrese de que estén en el orden correcto o todos se romperán:
a:link
a:visited
a:hover
a:active..en ese orden. Además, si solo está usando: active, agregue un enlace:, incluso si no lo está modificando.
He publicado una herramienta que debería solucionar este problema.
A primera vista, el problema parece simple, pero en realidad el comportamiento de tocar y hacer clic debe personalizarse bastante, incluidas las funciones de tiempo de espera y cosas como "qué sucede cuando se desplaza por una lista de vínculos" o "qué sucede cuando presiona el vínculo y luego alejar el mouse / dedo del área activa "
Esto debería resolverlo todo a la vez: https://www.npmjs.com/package/active-touch
Deberá tener sus: estilos activos asignados a la clase .active o elegir su propio nombre de clase. De forma predeterminada, el script funcionará con todos los elementos del enlace, pero puede sobrescribirlo con su propia matriz de selectores.
¡Comentarios y contribuciones honestas y útiles muy apreciadas!
Para aquellos que no quieran usar ontouchstart, pueden usar este código
<script>
document.addEventListener("touchstart", function(){}, true);
</script>Probé esta respuesta y sus variantes, pero ninguna parecía funcionar de manera confiable (y no me gusta confiar en la 'magia' para cosas como esta). Así que hice lo siguiente en su lugar, que funciona perfectamente en todas las plataformas, no solo en Apple:
:activehacerlo .active.Hizo una lista de todos los elementos afectados y se agregaron pointerdown/mousedown/touchstartcontroladores de eventos para aplicar la .activeclase y los pointerup/mouseup/touchendcontroladores de eventos para eliminarlos. Usando jQuery:
let controlActivationEvents = window.PointerEvent ? "pointerdown" : "touchstart mousedown";
let controlDeactivationEvents = window.PointerEvent ? "pointerup pointerleave" : "touchend mouseup mouseleave";
let clickableThings = '<comma separated list of selectors>';
$(clickableThings).on(controlActivationEvents,function (e) {
$(this).addClass('active');
}).on(controlDeactivationEvents, function (e) {
$(this).removeClass('active');
});Esto fue un poco tedioso, pero ahora tengo una solución que es menos vulnerable a la rotura entre las versiones del sistema operativo Apple. (¿Y quién necesita algo como esto para romper?)
Una solución es confiar en en :targetlugar de :active:
<style>
a:target {
background-color: red;
}
</style>
<!-- snip -->
<a id="click-me" href="#click-me">Click me</a>El estilo se activará cuando la URL actual apunte al ancla, que es sólida incluso en dispositivos móviles. El inconveniente es que necesita otro enlace para borrar el ancla en la URL. Ejemplo completo:
a:target {
background-color: red;
}<a id="click-me" href="#click-me">Click me</a>
<a id="clear" href="#">Clear</a>No está 100% relacionado con esta pregunta, pero también puede usar css sibling hack para lograr esto
HTML
<input tabindex="0" type="checkbox" id="145"/>
<label for="145"> info</label>
<span> sea</span>SCSS
input {
&:checked + label {
background-color: red;
}
}Si desea utilizar información sobre herramientas html / css pura
span {
display: none;
}
input {
&:checked ~ span {
display: block;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style>
a{color: red;}
a:hover{color: blue;}
</style>
</head>
<body>
<div class="main" role="main">
<a href="#">Hover</a>
</div>
</body>
</html>
ontouchstartsin el=""? (HTML5)