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

<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技巧来解决这个问题。

2016-07-14 stkvtflw

见：http://stackoverflow.com/questions/21261961/hover-event-on-touch-device?rq= 1 – Cruiser

我曾尝试过：悬停和它也与触摸设备上的单击事件一起工作 –

您可以使用媒体查询 – user3091574

-1

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

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

2016-07-14 14:27:00 Red

“只有jquery可以帮助你”......上帝拯救了我们所有人。 –

我不知道是谁downvoted，但它没有比我写的真相：/ – Red

嗯，这是一个答案。 awnser是触摸设备不支持：悬停事件（尚未）和JavaScript可以帮助做出解决方法 – Red

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

2016-07-14 14:30:31 Wilmer

回答