使用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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
纯html+css实现打字效果
Aug 02 HTML / CSS
CSS3实现指纹特效代码
Mar 17 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
php日历制作代码分享
2014/01/20 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
jquery $(document).ready()和window.onload的区别浅析
2015/02/04 Javascript
js用拖动滑块来控制图片大小的方法
2015/02/27 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
Underscore源码分析
2015/12/30 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Scrapy的简单使用教程
2017/10/24 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
Django中信号signals的简单使用方法
2019/07/04 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Django REST framework内置路由用法
2019/07/26 Python
Python数据库小程序源代码
2019/09/15 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
小学生家长评语集锦
2014/01/30 职场文书
铁路个人事迹材料
2014/01/30 职场文书
化妆师职业生涯规划书
2014/02/16 职场文书
趣味运动会开幕词
2015/01/28 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
单位同意报考证明
2015/06/17 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
Java实现多文件上传功能
2021/06/30 Java/Android