css - 显示 :none hover trick on a touchscreen device

Question

我正在使用 CSS 悬停技巧来清理我的界面。仅当光标悬停在元素内时才会显示控件。在触摸屏设备上使用界面时遇到问题。如果控制按钮未显示 display:none 而我触摸了它应该显示的位置，该按钮的事件仍然会被触发。

在您的浏览器和触摸屏设备上尝试这个 fiddle ，看看我的意思...... http://jsfiddle.net/6PvCn/2/

在触摸屏设备上，触摸红色方 block ，警报应该会触发，而按钮甚至不会出现。我在桌面 Android 模拟器和我真正的 Android 2.3 手机上测试了这个。

我想要的效果是按钮首先显示而不触发，即使用户触摸按钮“所在的位置”也是如此。

在求助于 javascript 之前，我宁愿使用纯 CSS 解决方案。

Answer 1

尝试 pointer-events: none; 和 display: none;