使用CSS3在触屏上为按钮实现激活效果


Posted in HTML / CSS onSeptember 27, 2013

1. :hover伪类在触屏上表现不完美,在Android的WebView中,WebKit会处理touch事件和mouse事件,当手指停留在按钮上,hover状态的确被触发,但是当手指保持接触屏幕并离开按钮,hover状态依然保留。所以需要借助:active伪类的css来表现状态变化。

2. 在触屏上,:hover和:active也不是直接就起到作用的,这里要借助一个小小的hack,在html的body中(或者目标元素上)添加 ontouchstart="" ,来邪恶地诱使WebView监听touch事件。

HTML / CSS 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
HTML5 标准将把互联网视频扔回到黑暗时代
Feb 10 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 #HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 #HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 #HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 #HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 #HTML / CSS
css3进行截取替代js的substring
Sep 02 #HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 #HTML / CSS
You might like
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
Javascript Math对象
2009/08/13 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
js实现编辑div节点名称的方法
2014/12/17 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
JavaScript模拟实现封装的三种方式及写法区别
2017/10/27 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
2021/01/29 Javascript
极简的Python入门指引
2015/04/01 Python
Python 爬虫学习笔记之单线程爬虫
2016/09/21 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Django使用消息提示简单的弹出个对话框实例
2019/11/15 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
新闻编辑自荐信
2013/11/03 职场文书
CNC数控操作工岗位职责
2013/11/19 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
导游词之广西漓江
2019/11/02 职场文书
Python中文纠错的简单实现
2021/07/07 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android