如何避免移动端:hover伪类导致的二次点击问题?

更新于
2026-09-29 10:14:23
0阅读来源:SEO资源
  • 内容介绍
  • 文章标签
  • 相关推荐

本文共计188个文字,预计阅读时间需要1分钟。

如何避免移动端:hover伪类导致的二次点击问题?

解决方案+在PC端,默认链接颜色是红色,hover时链接颜色变为蓝色,点击一次后跳转到http://www.baidu.com。但在移动端,第一次点击,链接颜色变为蓝色(移动端点击也会触发布尔吉触发)。

解决方案

在PC端中,默认链接颜色是红色, hover的时候,链接颜色是蓝色,点击一次跳转到“www.baidu.com” 但是在移动端上中,第一次点击,链接颜色变蓝(也就是移动端上点击会触发伪类效果),再点一次才会跳转到“www.baidu.com” 点我跳转到首页 .mylink{ color:red; } .mylink:hover{ color:blue; } 解决方法,在body上绑定一个空的touchstart事件即可。 document.body.addEventListener(‘touchstart’, function(){ });

如何避免移动端:hover伪类导致的二次点击问题?
标签:问题

本文共计188个文字,预计阅读时间需要1分钟。

如何避免移动端:hover伪类导致的二次点击问题?

解决方案+在PC端,默认链接颜色是红色,hover时链接颜色变为蓝色,点击一次后跳转到http://www.baidu.com。但在移动端,第一次点击,链接颜色变为蓝色(移动端点击也会触发布尔吉触发)。

解决方案

在PC端中,默认链接颜色是红色, hover的时候,链接颜色是蓝色,点击一次跳转到“www.baidu.com” 但是在移动端上中,第一次点击,链接颜色变蓝(也就是移动端上点击会触发伪类效果),再点一次才会跳转到“www.baidu.com” 点我跳转到首页 .mylink{ color:red; } .mylink:hover{ color:blue; } 解决方法,在body上绑定一个空的touchstart事件即可。 document.body.addEventListener(‘touchstart’, function(){ });

如何避免移动端:hover伪类导致的二次点击问题?
标签:问题