手机端a标签点击出现背景的解决方法

a-link.png 手机端a标签点击出现背景的解决方法 经验总结

如上图所示,手机/移动端点击 a 链接会有一个背景,尝试设置 background: none 无效。

解决方法:

给元素设置一个 -webkit-tap-highlight-color 就可以了:

a:focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*解决手机版点击背景问题*/
}

如果无效,多设置几个:

a, a:hover, a:visited, a:link, a:active , a:focus {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*解决手机版点击背景问题*/
}

-webkit-tap-highlight-color:

这是一个鲜为人知的属性,只用于iOS (iPhone和iPad)。

当你点击一个链接或者通过 Javascript 定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置 -webkit-tap-highlight-color 为任何颜色。

想要禁用这个高亮,设置颜色的 alpha 值为 0 即可。

示例:设置高亮色为 50% 透明的红色:

-webkit-tap-highlight-color: rgba(255,0,0,0.5);

浏览器支持: 只有iOS(iPhone和iPad)。


推荐阅读:

分享一些实用的Chrome DevTools技巧

【笔记】微信小程序通过app.json设置底部导航

给元素添加伪类 :before 不显示的解决方法

ColorZilla Chrome浏览器网页取色插件(不定时更新)

点击a页面链接跳转b页面某个tab切换的实现

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)