w3h5

手机端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)。


声明:本文由w3h5原创,转载请注明出处:《手机端a标签点击出现背景的解决方法》 https://www.w3h5.com/post/354.html

赞 (0)
分享到: +More |

评论 沙发

换个身份