使用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等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
详解HTML5 window.postMessage与跨域
May 11 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
CSS3实现的3D隧道效果
Apr 27 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
第十三节--对象串行化
2006/11/16 PHP
PHP 模板高级篇总结
2006/12/21 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
php如何获取文件的扩展名
2015/10/28 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
js 分栏效果实现代码
2009/08/29 Javascript
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python实现JSON反序列化类对象的示例
2018/01/31 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
django如何实现视图重定向
2019/07/24 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
京东国际站:JOYBUY
2017/11/23 全球购物
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
英国花园、DIY、电器和家居用品商店:Robert Dyas
2019/03/18 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
数学系毕业生的自我评价
2014/01/10 职场文书
2014年两会学习心得范例
2014/03/17 职场文书
汽车促销活动方案
2014/03/31 职场文书
质检员岗位职责范本
2015/04/07 职场文书
关于召开会议的通知
2015/04/15 职场文书