使用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仿造window7的开始菜单
Jun 17 HTML / CSS
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
Jun 27 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
HTML5地理定位实例
Oct 15 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
详解android与HTML混合开发总结
Jun 06 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 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+highchats生成动态统计图
2014/05/21 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
JS 页面计时器示例代码
2013/10/28 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
Python群发邮件实例代码
2014/01/03 Python
python+Django+apache的配置方法详解
2016/06/01 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
浅谈python3.6的tkinter运行问题
2019/02/22 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
Python实现平行坐标图的绘制(plotly)方式
2019/11/22 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
Redis数据同步之redis shake的实现方法
2022/04/21 Redis