手机浏览器wap网页点击链接触发颜色区块的问题解决办法

Posted 2020-07-31 me春天

引子

在做html5 WAP网页的时候，一行内容做了2个链接，点击一个标签的时候，整个颜色块会闪一下，影响美观。需求针对这种情况来问我，能否把这个一闪的颜色去掉。我当时就想，这个怎么去？那我也不好直接回绝她，好吧，我试试吧！经过研究，百度的很多a标签都是一闪一闪的，有颜色块，但是淘宝和京东的手机端就没有这种情况，这是如何做到的呢？

研究

通过研究他们的代码发现，在根属性中，他们设置了这样的一个属性-webkit-tap-highlight-color:rgba(0,0,0,0)。

下面解释一下什么是RGBA，RAG就是颜色值了，大家都知道，A就是Alpha的缩写，就是透明度的意思，多了一个透明度。那么这个

-webkit-tap-highlight-color:rgba(0,0,0,0)

的含义就是颜色是黑色，透明度是0，看不到了。所以点击就没有效果了。

-webkit-tap-highlight-color是什么？

注释：

-webkit-tap-highlight-color 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

当用户点击ios的Safari浏览器中的链接或javascript的可点击的元素时，覆盖显示的高亮颜色。该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

语法：

-webkit-tap-highlight-color：color

默认值： inherit

适用于：链接元素比如新窗口打开，img元素比如保存图像等等

兼容性：

iOS 1.1.1及更高版本的Safari浏览器可用。大部分android手机也是支持的，只是显示效果有所不同。

 

原文地址http://www.luoxiao123.cn/1487-2.html