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

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;
}

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

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.

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%;
    }

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

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

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.

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".

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
});

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.

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>