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

Posted

技术标签:

【中文标题】更改：悬停以触摸/单击移动设备【英文标题】：Changing :hover to touch/click for mobile devices 【发布时间】：2014-04-28 21:06:03 【问题描述】：

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

我目前在我的页面上有一个由 :hover 触发的 css 动画。当使用媒体查询将页面大小调整为超过 700 像素时，我希望将其更改为“点击”或“触摸”。

这是我目前拥有的：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;

【问题讨论】：

有个jquery插件叫hoverIntent 根据 MDN，现在所有版本都支持 :active。参考：developer.mozilla.org/en-US/docs/Web/CSS/:active 所以你应该可以用它作为前面提到的答案。 你怎么能看出这在移动设备上不起作用？如果我从手机打开 jsfiddle 链接，我看不到太多。 【参考方案1】：

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

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

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

【讨论】：

w3schools 不是最好的资源，因此我想引用developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive 这不适用于支持触控的 Windows 10 笔记本电脑上的 Microsoft Edge。 嗯……对不起？哈哈。是的，当我发布此消息时，Microsoft Edge 还没有发布……我认为 这似乎不适用于移动 safari。下面带有 onclick="" 的答案可以解决问题！ 这一切都很好，直到用户再次点击按钮关闭它，除非用户点击按钮外的任何地方，否则它不会关闭。在您有触摸模拟器的地方尝试 Chrome 开发工具响应式视图。如果它可以以某种方式在纯 CSS 中完成，那么再次点击按钮就会将其关闭，那真是太棒了！【参考方案2】：

您可以将onclick="" 添加到悬停元素。之后悬停将起作用。

编辑：但您真的不应该添加任何与您的标记相关的样式，只需将其发布为替代。

【讨论】：

这对我有用。 LOTUSMS 的回答没有——不知道为什么。也许这个页面的未来访问者可以启发 它适用于onclick="" 的Safari，但是如何停用该元素？它在第一次触摸后永远保持活动状态，即使在外面触摸也是如此。 2019 年更新：onclick="" 现已弃用【参考方案3】：

我在使用 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%;

【讨论】：

【参考方案4】： 
document.addEventListener("touchstart", function() , true);

这个 sn-p 将为触摸屏启用悬停效果

【讨论】：

我认为这值得更多解释。 不错的 hack，但需要小心：这可能会破坏其他特定的交互。 对我来说 - 也需要元素 ":focus" 和 ":active"【参考方案5】：

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

【讨论】：

“tabIndex”帮我搞定了，非常感谢！【参考方案6】：

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

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

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

它不是很优雅，但很有效。

【讨论】：

您对这一点的概括有点过分——尤其是较旧的 iPhone 在点击时不会应用 hover（但它们会应用 active 和 focus）。据我所知，它也不依赖于对象的“可点击性”，因为每个元素都是“可点击的” - 但我可能错了，因为我还没有看到所有设备，这就是为什么它是好的做法不仅要观察，还要记录。【参考方案7】：

我认为这个简单的方法可以达到这个目的。 使用 CSS，您可以将指针事件关闭为“无”，然后使用 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
);

【讨论】：

【参考方案8】：

好吧，我同意上述答案，但仍有另一种方法可以做到这一点，那就是使用media 查询。

假设这是你想要做的：

body.nontouch nav a:hover 
    background: yellow;

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

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

更多详情您可以访问this页面。

【讨论】：

这个答案没有解释如何添加点击功能。【参考方案9】：

为那些在移动触摸屏按钮样式方面遇到问题的人提供的纯 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>

【讨论】：

以上是关于更改：悬停以触摸/单击移动设备的主要内容，如果未能解决你的问题，请参考以下文章

CSS：触摸屏设备上的悬停行为

移动触摸设备（iPhone、Android、Windows）上的悬停效果

JavaScript 切换桌面/移动设备的悬停/触摸事件

单击/触摸事件的背景颜色更改在触摸设备上不起作用

悬停菜单，如何在移动设备中使用？

使悬停功能与移动设备兼容