CSS3解决移动页面上点击链接触发色块的问题

前端  /  管理员 发布于 7年前   146

引子

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

研究

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

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

CSS Code复制内容到剪贴板
  1. -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复制内容到剪贴板
  1. -webkit-tap-highlight-color：color  

默认值： inherit

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

兼容性：

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

应用

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html>   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title>haorooms博客之 tap-highlight-color测试</title>   
  6. <meta name="viewport" content="width=device-width maximum-scale=1, minimum-scale=1, user-scalable=no">   
  7. <meta name="apple-mobile-web-app-capable" content="yes" />   
  8. <style>   
  9. *{padding:0;margin:20px;color: #000;}   
  10. a{       
  11.     text-decoration: none;   
  12.     padding: 12px;   
  13.     background-color:#39a6df;   
  14.     border-radius: 10px;   
  15.     display: block;   
  16.     text-align: center;   
  17. }   
  18. a:link,a:visited,a:hover,a:active{   
  19.     color:#fff;       
  20.     text-decoration: none;   
  21. }   
  22. .no{   
  23.     -webkit-tap-highlight-color:rgba(0,0,0,0);   
  24. }   
  25. .hasRed{   
  26.     -webkit-tap-highlight-color:rgba(255,0,0,1);   
  27. }   
  28.   
  29. </style>   
  31. </head>   
  33. <body>   
  34.     <p>默认<br><a href="javascript:void(0)">a标签</a></p>   
  35.     <p>无色块<br><a href="javascript:void(0)" class="no">a标签</a></p>       
  36.     <p>点击之后有红色块<br><a href="javascript:void(0)" class="hasRed">a标签</a></p>   
  37.   
  38. </body>   
  39. </html>  


  • 上一条：
    深入解读CSS3中transform变换模型的渲染
    下一条：
    CSS兼容问题之HACK技术

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客