使用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 相关文章推荐
收集的7个CSS3代码生成工具
Apr 17 HTML / CSS
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
Aug 08 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 HTML / CSS
css3实现六边形边框的实例代码
May 24 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 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 Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
laravel框架中间件 except 和 only 的用法示例
2019/07/12 PHP
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
Javascript注入技巧
2007/06/22 Javascript
js用图作提交按钮或超连接
2008/03/26 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
Jquery时间轴特效(三种不同类型)
2015/11/02 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
Javascript的this详解
2019/03/23 Javascript
vue实现前台列表数据过滤搜索、分页效果
2019/05/28 Javascript
vue实现数字动态翻牌的效果(开箱即用)
2019/12/08 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
python选择排序算法的实现代码
2013/11/21 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
pandas 将索引值相加的方法
2018/11/15 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
优秀毕业生求职推荐信范文
2013/11/21 职场文书
个人收入证明模板
2014/09/18 职场文书
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers