Css：悬停时没有触摸设备的“点击”事件

Question

假设我有这个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技巧解决这个问题。

Answer 1

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

微软实际上正在研究http://www.theverge.com/2016/5/5/11595564/microsoft-3d-touch-kinect-gestures-windows-phones可能在不久的将来我们可以看到这种行为

Answer 2

触摸设备不支持

:hover。只有在触摸屏上点击它时，才会激活:hover个功能。

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