Cambio: desplazarse para tocar / hacer clic para dispositivos móviles


84

He echado un vistazo pero no encuentro lo que estoy buscando.

Actualmente tengo una animación css en mi página que se activa por: hover. Me gustaría que esto cambiara a 'hacer clic' o 'tocar' cuando el tamaño de la página supere los 700 px de ancho mediante consultas de medios.

Esto es lo que tengo en este momento: http://jsfiddle.net/danieljoseph/3p6Kz/

Como puede ver, el: hover no funcionará en dispositivos móviles, pero aún quiero asegurarme de que funcione de la misma manera con solo hacer clic, no desplazar.

Preferiría usar css si es posible, pero también estoy contento con JQuery.

Tengo la sensación de que esto es muy fácil de hacer, ¡pero me estoy perdiendo algo muy obvio! Cualquier ayuda sería apreciada.

Aquí está la animación css:

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}

hay un complemento de jquery llamado hoverIntent
Pete

Respuestas:


90

Si usa: selector activo en combinación con: hover, puede lograr esto de acuerdo con w3schools siempre que el selector: active se llame después del selector: hover.

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

Tendría que probar el FIDDLE en un entorno móvil. No puedo por el momento.
corrección : acabo de probar en un móvil, funciona bien


25
w3schools no es el mejor recurso, por lo tanto, me gustaría citar developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive
23tux

3
Esto NO funciona en Microsoft Edge en una computadora portátil con Windows 10 con capacidad táctil.
SepehrM

9
Ummmm ... lo siento? Jajaja Sí, Microsoft
Edge

2
Esto no parece funcionar en un safari móvil. ¡Sin embargo, la respuesta a continuación con onclick = "" funciona!
Jason Godson

4
Todo eso es muy bueno hasta que el usuario toca el botón nuevamente para cerrarlo y no se cerrará a menos que el usuario toque en cualquier lugar fuera del botón. Pruebe la vista receptiva de las herramientas de desarrollo de Chrome donde tiene un simulador táctil. Si pudiera hacerse de alguna manera en CSS puro, que otro toque en el botón lo cierre, ¡sería increíble!
lowtechsun

17

Puede agregar onclick=""al elemento flotante. Hover funcionará después de eso.

Editar: Pero realmente no debería agregar nada de estilo relacionado con su marcado, simplemente publíquelo como una alternativa.


esto funcionó para mí. La respuesta de LOTUSMS no lo hizo, no estoy seguro de por qué. tal vez un futuro visitante de esta página pueda iluminar
danyamachine

Funciona en safari onclick="", pero ¿cómo desactivar el elemento? Permanece activo para siempre después del primer toque, incluso cuando se toca el exterior.
gigabytes

4
Actualización 2019: onclick = "" ahora está en desuso
Gregdebrick

6

Tuve el mismo problema, en un dispositivo móvil con el navegador Edge de Microsoft. Puedo resolver el problema con: aria-haspopup="true". Es necesario agregar que el div y el :hover, :active, :focuspara los otros navegadores móviles.

HTML de ejemplo:

<div class="left_bar" aria-haspopup="true">

CSS:

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }

6
document.addEventListener("touchstart", function() {}, true);

Este fragmento permitirá efectos de desplazamiento para pantallas táctiles.


Creo que esto merece algunas explicaciones más.
Romain Vincent

Buen truco, pero hay que tener cuidado: esto puede romper otras interacciones específicas.
skabbit

3

Soy un novato en CSS, pero he notado que el hover funcionará para pantallas táctiles siempre que sea un elemento "hoverable": imagen, enlace, botón. Puedes hacerlo todo con CSS usando el siguiente truco.

Cambie el fondo de su div a una etiqueta de imagen real dentro del div o cree un enlace ficticio alrededor de todo el div, luego se registrará como un hover cuando toque la imagen.

Hacer esto significará que necesitas que el resto de tu página también sea "flotante", de modo que cuando toques fuera de la imagen, reconocerá que info-slide: hover ha finalizado. Mi truco consiste en hacer todos mis otros enlaces ficticios de contenido.

No es muy elegante pero funciona.


2
Estás generalizando esto un poco, especialmente los iPhones más antiguos no se aplican hovercon un clic (pero se aplican activey focus). Que yo sepa, tampoco depende de la "posibilidad de hacer clic" de un objeto, ya que se puede "hacer clic" en todos los elementos, pero podría estar equivocado, ya que no he visto todos los dispositivos, por lo que es una buena práctica no solo por observación, sino por documentación.
TheThirdMan

2

En la mayoría de los dispositivos, las otras respuestas funcionan. Para mí, para asegurarse de que trabajó en cada dispositivo (en reaccionar) que tenía que envolver en una etiqueta de ancla <a>y añadir la siguiente: :hover, :focus, :active(en ese orden), así como role="button"y tabIndex="0".


2

Creo que este método simple puede lograr este objetivo. Con CSS puede desactivar el evento de puntero en 'ninguno' y luego usar jQuery para cambiar de clase.

.item{
   pointer-events:none;
 }

.item.clicked{
   pointer-events:inherit;
 }
 
.item:hover,.item:active{
  /* Your Style On Hover Converted to Tap*/
  background:#000;
}

Use jQuery para cambiar de clase:

jQuery('.item').click(function(e){
  e.preventDefault();
  $(this).addClass('clicked')l
});


0

Bueno, estoy de acuerdo con las respuestas anteriores, pero aún puede haber otra forma de hacer esto y es mediante mediaconsultas.

Suponga que esto es lo que quiere hacer:

body.nontouch nav a:hover {
    background: yellow;
}

entonces puede hacer esto mediante consulta de medios como:

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

Y para más detalles puedes visitar esta página.


0

Una única solución de CSS para aquellos que tienen problemas con el estilo de los botones de la pantalla táctil móvil.

Esto solucionará los problemas del botón activo o del botón de desplazamiento.

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}
<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.