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 相关文章推荐
CSS3制作半透明边框(Facebox)类似渐变
Dec 09 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
canvas绘制文本内容自动换行的实现代码
Jan 14 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
比较详细PHP生成静态页面教程
2012/01/10 PHP
分享一个Laravel好用的Cache宏
2015/03/02 PHP
php实现微信企业转账功能
2018/10/02 PHP
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
python装饰器decorator介绍
2014/11/21 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
python pytest进阶之fixture详解
2019/06/27 Python
python 动态调用函数实例解析
2019/10/21 Python
django-crontab实现服务端的定时任务的示例代码
2020/02/17 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
高中美术教学反思
2014/01/19 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
新学期教师寄语
2014/04/02 职场文书
职务任命书范本
2014/06/05 职场文书
工作推荐信模板
2015/03/25 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL