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

标签 css user-interface touch

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

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

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

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

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

最佳答案

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

关于css - 显示 :none hover trick on a touchscreen device,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15345743/

相关文章:

java - Android 选项卡式 View 在触摸之前不会更新

ios - 如何使用 Core Graphics 在我的触摸位置画一个圆圈?

html - 两个 float 的 div,一左一右。我如何强制他们留在一条线上?

jquery - 当 div 位于窗口顶部时显示菜单 - jquery

c++ - 如何在WM6中创建圆角矩形按钮?

javascript - 在 jQuery Mobile 中检测从边缘滑动

html - 单击后删除按钮周围的蓝色边框

jquery - Chrome 上的旋转文本在动画时会晃动

user-interface - 如何单击更改 ID 的按钮?

java - 如何以编程方式调整 JTable 列的大小,DefaultTableModel Java