更改:悬停触摸/单击移动设备

Question

我环顾四周但却找不到我想要的东西.

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

Answer 1

如果你使用:主动选择器与:hover你可以根据w3schools实现这一点,只要在:hover选择器之后调用:active选择器.

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

您必须在移动环境中测试FIDDLE.我现在不能.
更正 - 我刚刚在手机上测试过,它运行正常

Answer 2

您可以添加onclick=""到悬停元素.哈弗将在那之后工作.

编辑:但你真的不应该添加任何与你的标记相关的样式,只是作为替代发布.

Answer 3

在大多数设备上，其他答案都有效。对我来说，为了确保它在每个设备上都能工作（在反应中），我必须将其包装在锚标记中<a>并添加以下内容： :hover、:focus、:active（按此顺序）以及role="button"和tabIndex="0"。

Answer 4

document.addEventListener("touchstart", function() {}, true);

此代码段将为触摸屏启用悬停效果

Answer 5

在带有Microsoft Edge浏览器的移动设备中，我也遇到了同样的麻烦。我可以使用解决此问题aria-haspopup="true"。对于其他移动浏览器，它需要添加到div和:hover，中。:active:focus

范例html：

<div class="left_bar" aria-haspopup="true">

CSS：

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }