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


Posted in HTML / CSS onJune 03, 2016

引子

前段时间做微信页面的时候,一行内容做了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-colorcolor  

默认值: 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-decorationnone;   
  12.     padding12px;   
  13.     background-color:#39a6df;   
  14.     border-radius: 10px;   
  15.     displayblock;   
  16.     text-aligncenter;   
  17. }   
  18. a:link,a:visited,a:hover,a:active{   
  19.     color:#fff;       
  20.     text-decorationnone;   
  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>   
  30. </head>   
  31. <body>   
  32.     <p>默认<br><a href="javascript:void(0)">a标签</a></p>   
  33.     <p>无色块<br><a href="javascript:void(0)" class="no">a标签</a></p>       
  34.     <p>点击之后有红色块<br><a href="javascript:void(0)" class="hasRed">a标签</a></p>   
  35.   
  36. </body>   
  37. </html>  
HTML / CSS 相关文章推荐
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
canvas进阶之如何画出平滑的曲线
Oct 15 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
CSS3轻松实现清新 Loading 效果的简单实例
Jun 06 #HTML / CSS
CSS3制作精致的照片墙特效
Jun 07 #HTML / CSS
CSS3字体效果的设置方法小结
Jun 13 #HTML / CSS
CSS3美化表单控件全集
Jun 29 #HTML / CSS
CSS3+DIV实现漂亮的动画彩色标签
Jun 16 #HTML / CSS
超酷炫 CSS3垂直手风琴菜单
Jun 28 #HTML / CSS
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 #HTML / CSS
You might like
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP文件操作实例总结
2016/09/27 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
用JavaScript显示随机图像或引用
2009/04/21 Javascript
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
2017/02/08 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
详解js的视频和音频采集
2018/08/09 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
Python写的服务监控程序实例
2015/01/31 Python
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
Python面向对象编程之继承与多态详解
2018/01/16 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
如何将json数据转换为python数据
2020/09/04 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
医德医风自我评价
2014/09/19 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
只需要这一行代码就能让python计算速度提高十倍
2021/05/24 Python
处理canvas绘制图片模糊问题
2022/05/11 Javascript
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android