将：hover更改为触摸/单击移动设备

  • Z时代
  • 2024-01-10
  • 分类：问答

我环顾四周，但找不到我想要的东西。

我的页面上目前有一个CSS动画，它是由：hover触发的。当使用媒体查询将页面调整为宽度超过700px时，我希望将其更改为“单击”或“触摸”。

如您所见，：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;
}

回答：

如果将：active选择器与：hover结合使用，只要在：hover选择器之后调用：active选择器，就可以根据实现此目的。

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

您必须在移动环境中测试 。我暂时不能。 -我刚刚在手机上测试过，效果很好

以上是 将：hover更改为触摸/单击移动设备 的全部内容， 来源链接： utcz.com/qa/415026.html

回到顶部