解决:hover伪类在移动端二次点击的问题

2016-01-19阅读(11248)评论(2)牵着狗狗看MM

苏州实时公交查询

假设有个a标签

[html]<a href="http://www.w3cways.com" class="mylink">点我跳转到首页</a>
[/html]

[css].mylink{
color:red;
}
.mylink:hover{
color:blue;
}
[/css]

在PC端中,默认链接颜色是红色, hover的时候,链接颜色是蓝色,点击一次跳转到“http://www.wc3ways.com”
但是在移动端上中,第一次点击,链接颜色变蓝(也就是移动端上点击会触发伪类效果),再点一次才会跳转到“http://www.wc3ways.com”

解决方法,在body上绑定一个空的touchstart事件即可。

[js]document.body.addEventListener(‘touchstart’, function(){ });
[/js]

Demo

赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 解决:hover伪类在移动端二次点击的问题
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏