手机端css实现active伪类
今天遇到手机端的css中a标签的active不起作用，原本想循环a标签，给当前的a标签添加class来解决，可觉得有点儿小麻烦，经查资料了解到解决此问题，只需要添加一个touchstart的空事件即可。
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{ margin:0; padding:0; }
.domain a{ display:inline-block; border:1px solid #ccc; padding:5px 10px; margin:10px; }
.domain a:active{ background-color:#c00; color:#fff; }
</style>
</head>
<body>
<div class="domain" id="js-domain">
<a href="#">点击1</a>
<a href="#">点击2</a>
</div>
<script>
window.onload = function(){
var doma=document.getElementById("js-domain").getElementsByTagName('a');
for(var i=0;i<doma.length;i++){
doma[i].addEventListener('touchstart',function(){},false);
};
}
</script>
</body>
</html>
手机端css实现active伪类的更多相关文章
- iOS Web开发激活css的active伪类
最近在做一个资讯客户端,用到UIWebview展示一些网页内容,本来想做一个简单的按压效果,发现在css中设置active属性一直不管用. 查阅了一下资料,今天发现,要让css active伪类生效, ...
- css :active伪类的理解
/*active伪类为点击鼠标按下去还没松开鼠标的那一瞬间的事件*/
- 移动端:active伪类无效的解决方法
:active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式.最常用于锚点<a href="#">这种情况,一般主流浏览器下也支持其他元素,如button等. ...
- CSS Pseudo-classes（伪类）
CSS Pseudo-classes(伪类) CSS伪类是用来添加一些选择器的特殊效果. 一.语法 伪类的语法: selector:pseudo-class {property:value;} CSS ...
- CSS属性、伪类选择器，CSS3选择器
CSS1时IE6是部分支持,伟大的IE6!CSS2时IE6部分支持,伟大的IE6依旧是部分支持!CCS3盛行CSS4也已经提上日程的现在,IE6完全不支持.IE6你该走了,我们会永远记住你的功绩的!I ...
- 移动端bug~~移动端:active伪类无效的解决方法【移动端 ：active样式无效】
移动端:active伪类无效的解决方法[移动端 :active样式无效]2016-09-26 15:46:50 问题: 移动端开发的时候实现按钮的点击样式变化,但是在iphone[safiri Mo ...
- css中的伪类
伪类用于向某些选择器添加一些特殊效果. 1):focus 伪类在元素获得焦点的时向元素添加特殊样式.一般用于输入文本域,按钮,以及超链接. a:focus{color:red;}超链接字体为红色 in ...
- 解决scroll在ios上卡顿问题和兼容ios不支持:active伪类情况
//有时候因为滚动层级元素过多会产生卡顿,特别在ios上十分明显,如果不想更换其他实现方式,可以加:-webkit-overflow-scrolling: touch; 开启硬件加速: 兼容ios不支 ...
- 微信浏览器或各种移动浏览器上:active伪类做的触觉反馈失效
在做移动端页面的时候,会发现PC上那种:hover的效果是不管用了的,但又要给用户一个点击反馈怎么办呢?我管它叫触觉反馈. 细心点就会发现浏览器有自带了一点触觉反馈,在点击a.button.input ...
随机推荐
- Tensorf实战第九课（自编码AutoEncoder）
本节我们将了解神经网络进行非监督形式的学习,即autoencoder自编码 假设图片经过神经网络后再输出的过程,我们看作是图片先被压缩然后解压的过程.那么在压缩的时候,原有的图片质量被缩减,解压时用信 ...
- NOIp2016 D2T3 愤怒的小鸟【搜索】（网上题解正解是状压）
题目传送门 没啥别的想法,感觉就是搜索,经过原点的抛物线已知两个点就可以求出解析式,在还没有被打下来的两个猪之间随意配对,确定解析式之后标记在这个抛物线下被打下来的猪. 猪也可以单独用一个抛物线打下来 ...
- ciscn-华北赛区-Day1-Web2题解
漏洞点 薅羊毛逻辑漏洞 Cookie伪造 -> JWT python反序列化 -> 反弹shell 薅羊毛逻辑漏洞 打开题目是这样一个页面 其实最初的题目这个募集资金的进度条是没有刷满的, ...
- Mongo数据库备份
安全访问状态下 手动在线备份: mongodump -h 127.0.0.1:27017 -u=username -p=123456 -d dbname -o /home/backups 手动恢复: ...
- CF235A 【LCM Challenge】
这题好毒瘤啊 (特别是long long的坑,调了半天没调好!!)先将你特判一下小于3的话直接输出就是惹,不是的话就判断一下它能不能被2整除如果不能就直接输出n*(n-1)*(n-2)否则进行枚举枚举 ...
- MySQL 中 savepoint 的使用
介绍 savepoint 结点名; # 设置保存点,并和rollback结合使用,实现回滚到指定保存点 rollback to 结点名; # 回滚到指定点 样例演示 USE human; ; sta ...
- uboot 主Makefile 分析。
本文以uboot_1.1.6 对应的CPU是S3C2440 为例 uboot_1.1.6 根目录下的主Makefile开头: VERSION = PATCHLEVEL = SUBLEVEL = EXT ...
- mac 安装 php7 及扩展
mac 版本号:10.12.3 (16D30) 安装内容 php7.0.18(配置apache),composer,phpunit,xdebug扩展,docopts,mongo和redis扩展 php ...
- 模块之re模块 正则表达式
正则表达式,正则表达式在处理字符串上有先天的优势,尤其大数量的字符串.先来记一个网站,此网站功能就是关于正则表达式方面的应用http://tool.chinaz.com/regex/ 单纯的正则表达式 ...
- oracle 重置密码(一般电网，国企需要的二级等保)
oracle 10g,11g 可以查找以下,12c没有测试 一.查看profile配置并记录;二.在重置密码之前修改profile(PASSWORD_REUSE_MAX.PASSWORD_REUSE_ ...