更改：悬停在移动设备上触摸/点击 | 悬停在移动设备上触摸

本文介绍了更改：悬停在移动设备上触摸/点击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我目前在我的页面上有一个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; 
}

解决方案

结合：hover您可以根据实现此功能，只要：

  .info-slide：hover，.info-slide：active {
 height：300px; 
}

您必须测试。我现在不能。

更正 - 我刚刚在移动设备上测试，效果很好

I've had a look around but can't quite find what i'm looking for.

I currently have a css animation on my page which is triggered by :hover. I would like this to change to 'click' or 'touch' when the page is resized past width 700px using media queries.

Here is what i have at the moment: http://jsfiddle.net/danieljoseph/3p6Kz/

As you can see, the :hover will not work on mobile devices but i still want to ensure it works the same way just by click, not hover.

I would rather use css if possible but happy with JQuery also.

I have a feeling this is very easy to do but i am just missing something very obvious! Any help would be appreciated.

Here is the css animation:

.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;
}

解决方案

If you use :active selector in combination with :hover you can achieve this according to w3schools as long as the :active selector is called after the :hover selector.

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

You'd have to test the FIDDLE in a mobile environment. I can't at the moment.
correction - I just tested in a mobile, it works fine