忙起来的时候连博客都忘记登录，就更别说写博客了，所以一不小心差点遗忘了我的泪雪博客，因子凡最近正在给泪雪网的移动端做改版，然后在开发中遇到一些新的问题，那就是手机上浏览网站，点击链接或者页面区域的时候会出现蓝色的区块，或者说出现一层遮罩，让人有些不是很舒服，那么该如何解决呢？

首先并不是所有浏览器访问都会出发区域块，子凡所使用的夸克浏览器目前出现了，其它浏览器未做详细测试，从开发者的角度来看触发区域块是能够帮助开发者快速了解点击区域，方便调整和优化用户体验，而对于用户而言，触发的区块框就显得有些格格不入了。

子凡也不废话，解决的办法就是利用 CSS3 的-webkit-tap-highlight-color 来设置，这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。当用户点击浏览器中的链接或 JavaScript 的可点击的元素时，覆盖显示的高亮颜色。该属性可以只设置透明度。当透明度设为 0，则会禁用此属性；当透明度设为 1，元素在点击时不可见。

1

*{-webkit-tap-highlight-color: transparent;}

代码就这一行，放在你的 css 文件中即可，当然如果你只是想要针对 a 标签，那么你就写到 a 标签中，这里用星号就是对页面的所有元素都不要显示这个区块。

好啦，就这么多，希望子凡在力求极致的过程中能够给大家带来一些小小的技巧或者思路，这才是我泪雪博客存在的价值，如果有一天你发现泪雪博客忽然就断更了，可能只是我手头上在忙于做一些事情，如果你有相关问题还是可以在博客给我留言，子凡看到后会第一时间回复啦。

w.haolusi.com

本文链接：https://w.haolusi.com/webkit-tap-highlight-color.html