2010-03-11 44 views
53

¿Funciona css hover en los dispositivos móviles? Tengo una clase css hover que funciona bien en un navegador web normal, pero no funciona en navegadores móviles.¿Funciona css hover en dispositivos móviles?

+0

http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/ – Pacerier

Respuesta

31

La pseudo-clase :hover necesita un dispositivo señalador (entrada gráfica), capaz de distinguir las acciones apuntando y selección/activación. Por lo general, en los dispositivos móviles con una interfaz táctil no tiene el primero, solo este último. También algunas interfaces de lápiz solo permiten activar, no señalar.

La pseudoclase :hover se aplica mientras el usuario designa un elemento (con algún dispositivo señalador), pero no lo activa. Por ejemplo, un agente de usuario visual podría aplicar esta pseudo-clase cuando el cursor (puntero del mouse) se cierne sobre un cuadro generado por el elemento. Los agentes de usuario que no admiten medios interactivos no tienen que admitir esta pseudoclase. Algunos agentes de usuario conformes que admiten medios interactivos pueden no ser compatibles con esta pseudo-clase (por ejemplo, un dispositivo de lápiz).

- W3C: CSS 2.1: Selectors, dynamic pseudo-classes

lo tanto, para responder a su pregunta: Depende del dispositivo, pero probablemente no. Y no confíes en eso. Con los dispositivos con pantalla táctil que ganan popularidad rápidamente, perderá la totalidad de los eventos que solo apuntan.

+3

Tal vez la nueva tecnología traerá de vuelta los eventos solo de puntos. Ver [this] (http://www.mobilemag.com/2010/04/22/cypress-truetouch-adds-hover-functions-to-touchscreens/) y [this] (http://www.webia.info/articles/usability/the-change-is-here-hover-events-come-to-mobile-devices /) enlaces, por ejemplo. –

+0

Sé que Wacom estaba trabajando en eso, pero ¿de verdad espera que estos ganen un uso generalizado en el futuro previsible? – Joey

+1

¡Sí! ¿Esperas que los teléfonos móviles con pantalla táctil (o cualquier otra tecnología actual) obtengan un uso generalizado tan rápido? :) –

3

Depende del navegador utilizado en el dispositivo móvil. Consulte Quirks Mode para dispositivos móviles y vea si su navegador/plataforma lo implementará.

0

Yo diría que no, ya que no se ciernen sobre una interfaz móvil. Puede presionar, si está en la pantalla táctil. De lo contrario, solo mueves a través de enlaces.

7

No a menos que el dispositivo pueda detectar cuando alguien pasa el dedo sobre la pantalla, a punto de tocar. :)

+4

Para los dedos que serían una característica casi inútil, sin embargo, como con el tamaño de esos dispositivos, es muy probable que tengas el dedo sobre cualquier cosa que reaccione al vuelo estacionario. A menos que tus dedos sean translúcidos, sería bastante difícil de ver ;-) – Joey

+1

¡+1 para eso! Ver [this] (http://www.mobilemag.com/2010/04/22/cypress-truetouch-adds-hover-functions-to-touchscreens/) y [this] (http://www.webia.info/articles/usability/the-change-is-here-hover-events-come-to-mobile-devices /) enlaces, por ejemplo. –

0

no va a hacer su magia en dispositivos de pantalla táctil, pero funciona en los teléfonos móviles, donde el usuario navega por el uso de algunas teclas de flecha (o en el Amazonas)

0

también trabaja para blackberry storm 1, ya que los dispositivos tener contacto y hacer clic en eventos debido a sus pantallas táctiles de suedo.

0

: el desplazamiento funciona con el navegador predeterminado de Android, pero es realmente complicado (para el usuario) activar el vuelo sin activar un clic al mismo tiempo.

20

suspiro. Parece que nadie respondiendo esta pregunta realmente lo intentó en un dispositivo real. En muchos casos, funciona. El primer clic actúa como un elemento estacionario.

Algunos más información aquí: http://designshack.net/articles/css/are-hover-events-extinct/

+5

Claro, eso está bien si hacer clic en algo no hace nada y solo lo hace flotar. Pero en la mayoría de los casos he visto ': hover' desencadena cierta información auxiliar, una información sobre herramientas o similar, con respecto a lo que sucede cuando haces clic. Como no puede separar los dos en dispositivos móviles, se pierde un caso de uso muy grande. – Joey

+0

@ Јοеу - Estoy de acuerdo, pero vale la pena saberlo: el vuelo estacionario no es una causa totalmente perdida en los dispositivos táctiles. –

+0

@andybak ¿Alguna actualización últimamente sobre soporte? –

2

Desde mi propia experiencia, que trabaja muy bien en mi iphone4, cualquiera que sea el navegador (Safari o Chrome), pero no funciona correctamente en mi nexus10 con cromo ...

Utilicé: desplácese para implementar el menú. Cuando digo "funciona", me refiero a que el primer toque se comporta como un vuelo estacionario en un escritorio, y un segundo toque se comportará como un clic. Cuando digo "no funciona", me refiero a que un toque se comporta como un clic directamente ...

6

¿Qué quiere decir el autor de la pregunta "Funciona css hover en dispositivos móviles?"?

Obviamente, no lo dice literalmente, porque no existe el elemento flotante en los dispositivos móviles, por lo que no puede funcionar.

Si quiere decir "En dispositivos móviles si toco un objeto con un estilo de vuelo estacionario ¿pasa algo?" la respuesta es Sí, pero lo que sucede varía según el dispositivo/navegador.

Específicamente en iPhone/Safari y Android, la respuesta es como si hubiera escrito un controlador de eventos OnClick() con el cambio de estilo en él, y esto persiste hasta que toque en otro objeto. En el teléfono Windows, el cambio de estilo ocurre mientras el dedo está presionado en el teléfono y luego se invierte cuando lo suelta.

Puede verificar su dispositivo en el sitio de prueba que configuré al davidleader.net/mobiledemo.html.

Cuestiones relacionadas