Css：悬停没有触摸设备的“点击”事件[重复]答案

【问题标题】：Css :hover without "click" event for touch devices [duplicate]Css：悬停没有触摸设备的“点击”事件[重复]
【发布时间】：2016-07-14 22:30:31
【问题描述】：

假设我有这个 html 结构：

<div className="big-square">
    <div className="small-button">button</div>
</div>

我需要在.big-square:hover 上显示按钮。这很简单，但触控设备呢？如果我将简单地使用.big-square:hover css 规则，那么如果用户不小心点击了按钮的位置，那么按钮就会出现并立即被点击。我想避免这种情况。我尝试使用 misc 转换延迟，但这不起作用。

这里举个例子，便于理解和回答：
https://jsfiddle.net/hznjb8ur/

为了简单起见，Jquery 在那里。在这种情况下，我想避免使用 jquery 甚至 js，因为我在一个页面上有几十上百个这样的元素，所以我宁愿用简单的 css 技巧来解决这个问题。

【问题讨论】：

【解决方案1】：

实际的“可触摸”设备不支持悬停，因为屏幕不知道指针（手指或其他任何东西）的位置。

【讨论】：

【解决方案2】：

触摸设备不支持:hover。 :hover 功能只有在您在触摸屏上单击时才会激活。

为什么不在触摸设备上显示按钮而不是隐藏它？否则只有 jquery 可以帮助您。

【讨论】：