📜  chrome hide blue highlight css mobile - CSS (1)

📅  最后修改于: 2023-12-03 14:59:55.578000             🧑  作者: Mango

隐藏 Chrome 手机版的蓝色突出显示效果

在 Chrome 浏览器的手机版中,当用户点击一个链接时,会有一个蓝色的突出显示效果。对于一些开发者而言,这一外观效果可能不太符合他们的设计需求,因此他们希望能够隐藏这一效果。

下面是一些 CSS 代码,可以实现隐藏 Chrome 手机版中的蓝色突出显示效果:

a:active, a:hover {
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

该代码将 a 元素在用户激活状态下的 :active 和悬停状态下的 :hover 伪类的 -webkit-tap-highlight-color 属性值都设置为透明,从而实现了隐藏效果。

需要注意的是,由于 -webkit-tap-highlight-color 是一种专门为移动端设计的 CSS 属性,因此只有在移动端浏览器中才会生效。在桌面端浏览器中,该代码并不会造成任何影响。

可以将上述代码应用于你的网页中,从而实现隐藏 Chrome 手机版中的蓝色突出显示效果。