He echado un vistazo, pero no puedo encontrar lo que estoy buscando.

Actualmente tengo una animación CSS en mi página que se activa por: hover. Me gustaría que esto cambie a 'hacer clic' o 'tocar' cuando la página se redimensione más allá del ancho 700px usando consultas de medios.

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

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

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