Я осмотрелся вокруг, но не могу найти то, что я ищу.

В настоящее время у меня есть анимация CSS на моей странице, которая запускается: hover. Я хотел бы, чтобы это изменилось на «щелчок» или «касание», когда размер страницы превышает 700 пикселей, используя медиа-запросы.

Вот что у меня есть на данный момент:http://jsfiddle.net/danieljoseph/3p6Kz/

Как вы можете видеть,: hover не будет работать на мобильных устройствах, но я все же хочу убедиться, что он работает так же, просто щелкнув, а не при наведении курсора.

Я бы предпочел использовать css, если это возможно, но также доволен JQuery.

У меня такое чувство, что это очень легко сделать, но я просто упускаю что-то очень очевидное! Любая помощь будет оценена.

Вот анимация 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;
}