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

时间：2021-05-08

引子

前段时间做微信页面的时候，一行内容做了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复制内容到剪贴板
  • <!DOCTYPEhtml>
  • <html>
  • <head>
  • <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  • <title>haorooms博客之tap-highlight-color测试</title>
  • <metaname="viewport"content="width=device-widthmaximum-scale=1,minimum-scale=1,user-scalable=no">
  • <metaname="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;
  • display:block;
  • text-align:center;
  • }
  • a:link,a:visited,a:hover,a:active{
  • color:#fff;
  • text-decoration:none;
  • }
  • .no{
  • -webkit-tap-highlight-color:rgba(0,0,0,0);
  • }
  • .hasRed{
  • -webkit-tap-highlight-color:rgba(255,0,0,1);
  • }
  • </style>
  • </head>
  • <body>
  • <p>默认<br><ahref="javascript:void(0)">a标签</a></p>
  • <p>无色块<br><ahref="javascript:void(0)"class="no">a标签</a></p>
  • <p>点击之后有红色块<br><ahref="javascript:void(0)"class="hasRed">a标签</a></p>
  • </body>
  • </html>

    • 声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章