我目前在我的页面上有一个css动画，由当使用媒体查询调整页面大小时，我想将其更改为“宽度700px”，然后更改为“点击”或“触摸”。

这是我现在有的：http://jsfiddle.net/danieljoseph/3p6Kz/

您可以看到：悬停在移动设备上不起作用，但我仍然希望通过单击，而不是悬停来确保它的工作方式相同。

我宁愿使用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;
}