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


83

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

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

有一个名为hoverIntent的jQuery插件
Pete

Answers:


89

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

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

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


25
w3schools不是最好的资源,因此我希望引用developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive
23tux

3
这在启用触摸的Windows 10笔记本电脑上的Microsoft Edge上不起作用。
SepehrM

9
嗯...抱歉?大声笑。是的,当我发布此消息时,Microsoft Edge尚未出现...我认为
LOTUSMS

2
这似乎不适用于移动浏览器。下面的答案与onclick =“”可以解决问题!
杰森·戈德森

4
直到用户再次轻按按钮将其关闭,除非用户在按钮以外的任何位置轻按,它才会关闭,这一切都是非常好的。在拥有触摸模拟器的地方尝试使用Chrome开发者工具的响应式视图。如果可以通过纯CSS进行某种方式的操作,则再次点击按钮将其关闭,那就太好了!
lowtechsun

17

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

编辑:但是您真的不应该添加与您的标记相关的任何样式,只需将其发布即可。


这对我有用。LOTUSMS的答案没有-不确定原因。也许这个页面的未来访问者可以启发您
danyamachine

可以在带有的safari中使用onclick="",但是如何停用该元素?第一次触摸后,它始终保持活动状态,即使在外面触摸时也是如此。
千兆字节

4
更新2019年:onclick =“”现已弃用
Gregdebrick '19

6

在带有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%;
    }

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

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


我认为这值得更多解释。
罗曼·文森特

不错,但要小心:这可能会破坏其他特定的交互。
skabbit

3

我是CSS菜鸟,但我注意到,只要它是“可悬停”元素:图像,链接,按钮,悬停就可以在触摸屏上使用。您可以使用以下技巧在CSS上完成所有操作。

将div背景更改为div中的实际图像标签,或在整个div周围创建一个虚拟链接,然后在触摸图像时它将注册为悬停。

这样做将意味着您还需要页面的其余部分也“可悬停”,因此当您触摸图像之外时,它会识别到info-slide:hover已经结束。我的诀窍是使所有其他内容成为虚拟链接。

它不是很优雅,但可以。


2
您对此进行了一些概括-特别是旧版iPhone不适hover用于点击(但适用于activefocus)。据我所知,它也不取决于对象的“可单击性”,因为每个元素都是“可单击的”-但是我可能是错的,因为我没有看到所有设备,因此这是一个好习惯不仅要观察,还要记录。
TheThirdMan

2

在大多数设备上,其他答案有效。对我来说,要确保它的工作在每一个设备(在反应),我不得不把它包在一个锚标记<a>,并添加以下: :hover:focus:active(按顺序),以及role="button"tabIndex="0"


2

我认为这种简单的方法可以实现此目标。使用CSS可以将指针事件关闭为“ none”,然后使用jQuery切换类。

.item{
   pointer-events:none;
 }

.item.clicked{
   pointer-events:inherit;
 }
 
.item:hover,.item:active{
  /* Your Style On Hover Converted to Tap*/
  background:#000;
}

使用jQuery切换分类:

jQuery('.item').click(function(e){
  e.preventDefault();
  $(this).addClass('clicked')l
});


0

好吧,我同意上面的答案,但是仍然可以有另一种方法,那就是使用 media查询。

假设这是您想要做的:

body.nontouch nav a:hover {
    background: yellow;
}

那么您可以通过媒体查询来做到这一点:

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

有关更多详细信息,请访问页面。


0

针对那些在移动触摸屏按钮样式上遇到麻烦的人的纯CSS解决方案。

这将解决您的悬停/活动按钮问题。

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}
<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.