我环顾四周,但找不到我想要的东西。
我的页面上目前有一个CSS动画,它是由:hover触发的。当使用媒体查询将页面调整为宽度超过700px时,我希望将其更改为“单击”或“触摸”。
这是我目前所拥有的: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;
}