CSS3解決移動頁面上點擊鏈接觸發色塊的問題

2024-07-11 08:39:54

字體：大中小

來源：轉載

供稿：網友

引子

前段時間做微信頁面的時候，一行內容做了2個鏈接，點擊一個標簽的時候，整個顏色塊會閃一下，影響美觀。需求針對這種情況來問我，能否把這個一閃的顏色去掉。我當時就想，這個怎么去？那我也不好直接回絕她，好吧，我試試吧！經過研究，百度的很多a標簽都是一閃一閃的，有顏色塊，但是淘寶和京東的手機端就沒有這種情況，這是如何做到的呢？

研究

通過研究他們的代碼發現，在根屬性中，他們設置了這樣的一個屬性-webkit-tap-highlight-color:rgba(0,0,0,0)。

下面解釋一下什么是RGBA，RAG就是顏色值了，大家都知道，A就是Alpha的縮寫，就是透明度的意思，多了一個透明度。那么這個

CSS Code復制內容到剪貼板

-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，元素在點擊時不可見。

語法：

CSS Code復制內容到剪貼板

-webkit-tap-highlight-color：color

默認值： inherit

適用于：鏈接元素比如新窗口打開，img元素比如保存圖像等等

兼容性：

iOS 1.1.1及更高版本的Safari瀏覽器可用。大部分android手機也是支持的，只是顯示效果有所不同。

應用

CSS Code復制內容到剪貼板

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>haorooms博客之 tap-highlight-color測試</title>
<meta name="viewport" content="width=device-width maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
*{padding:0;margin:20px;color: #000;}
a{
    text-decoration: none;
    padding: 12px;
    background-color:#39a6df;
    border-radius: 10px;