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矩阵Matrix滤镜旋转与缩放及如何结合transform
Nov 29 HTML / CSS
CSS图片翻转动画技术详解(IE也实现了)
Apr 03 HTML / CSS
分享CSS3制作卡片式图片的方法
Jul 08 HTML / CSS
CSS3 毛玻璃效果
Aug 14 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
Apr 26 HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 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 数组之count 函数
2016/06/13 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
Javascript继承(上)——对象构建介绍
2012/11/08 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
学习python处理python编码问题
2011/03/13 Python
python字符串替换的2种方法
2014/11/30 Python
Python中不同进制互相转换(二进制、八进制、十进制和十六进制)
2015/04/05 Python
python中base64加密解密方法实例分析
2015/05/16 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Django中使用CORS实现跨域请求过程解析
2019/08/05 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
计算机专业个人求职自荐信
2013/09/21 职场文书
自我鉴定怎么写
2014/01/12 职场文书
劳动实践课感言
2014/02/01 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
付款委托书范本
2014/04/04 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
总经理助理岗位职责
2015/01/31 职场文书
教师节班会开场白
2015/06/01 职场文书
治理商业贿赂工作总结
2015/08/10 职场文书