我到处看了看，但找不到我要找的东西.
我目前在我的页面上有一个css动画，它由:hover触发.我希望在使用媒体查询将页面调整到超过700px的宽度时，将其更改为"单击"或"touch ".
以下是我目前拥有的: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;
}