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实现的鼠标经过按钮特效教程
Nov 09 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
HTML5学习笔记之History API
Feb 26 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 HTML / CSS
企业开发CSS命名BEM代码规范实践
Feb 12 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 Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
jquery中get和post的简单实例
2014/02/04 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
微信小程序 登录实例详解
2017/01/16 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
JavaScript数组_动力节点Java学院整理
2017/06/26 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
JavaScript实现随机点名器
2020/03/25 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python中的闭包用法实例详解
2015/05/05 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
python 同时读取多个文件的例子
2019/07/16 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
英文自荐信
2013/12/19 职场文书
初中科学教学反思
2014/01/21 职场文书
学雷锋演讲稿汇总
2014/05/10 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
刘胡兰观后感
2015/06/16 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
浅析MongoDB之安全认证
2021/06/26 MongoDB
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android