手机网站点击链接触发颜色块的问题解决
来源:互联网 发布:标题优化工具 编辑:程序博客网 时间:2024/05/01 10:53
引子
前段时间做微信页面的时候,一行内容做了2个链接,点击一个标签的时候,整个颜色块会闪一下,影响美观。需求针对这种情况来问我,能否把这个一闪的颜色去掉。我当时就想,这个怎么去?那我也不好直接回绝她,好吧,我试试吧!经过研究,百度的很多a标签都是一闪一闪的,有颜色块,但是淘宝和京东的手机端就没有这种情况,这是如何做到的呢?
研究
通过研究他们的代码发现,在根属性中,他们设置了这样的一个属性-webkit-tap-highlight-color:rgba(0,0,0,0)。
下面解释一下什么是RGBA,RAG就是颜色值了,大家都知道,A就是Alpha的缩写,就是透明度的意思,多了一个透明度。那么这个
-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,元素在点击时不可见。
语法:
-webkit-tap-highlight-color:color
默认值: inherit
适用于:链接元素比如新窗口打开,img元素比如保存图像等等
兼容性:
iOS 1.1.1及更高版本的Safari浏览器可用。大部分android手机也是支持的,只是显示效果有所不同。
应用
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>haorooms博客之 tap-highlight-color测试</title><meta name="viewport" content="width=device-width maximum-scale=1, minimum-scale=1, user-scalable=no"><meta name="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><a href="javascript:void(0)">a标签</a></p> <p>无色块<br><a href="javascript:void(0)" class="no">a标签</a></p> <p>点击之后有红色块<br><a href="javascript:void(0)" class="hasRed">a标签</a></p></body></html>
将上面代码贴到html中测试一下!可以用谷歌模拟调试。可以看我之前的一篇文章电脑上调试手机网站的几种方法
关于上面demo中,我的meta的写法,有不明白的同学可以查看我之前的一篇关于手机网站注意的几点问题,可以看文章http://www.haorooms.com/post/phone_web 里面有关于meta 的设置说明。
- 手机网站点击链接触发颜色块的问题解决
- 解决移动端点击链接触发颜色块的问题
- 手机网页点击链接触发手机自动拨打或保存电话的代码
- 手机网页点击链接触发手机自动拨打或保存电话的代码
- 手机网页点击链接触发手机自动拨打或保存电话的代码
- 手机网页点击链接触发手机自动拨打或保存电话的代码
- 关于手机网站(webApp)点击链接出现蓝色焦点框的问题
- adb 链接手机offline的问题解决方法
- jsjq点击触发跳转链接
- A链接标签点击不会触发任何行为的写法
- css去除页面点击链接、按钮触发的虚线框
- A链接标签点击不会触发任何行为的写法
- 链接点击前后的颜色设置以及消除链接下划线
- jquery 触发a链接点击事件
- 如何通过点击链接触发jenkins构建
- 图片点击指定位置触发链接
- android点击手机返回键触发事件
- createJs 手机点击触发两次解决方法
- java常量池概述
- Cookie深度解析
- java利用Freemarker模板生成格式友好的doc或者docx文档
- 学习deepmind lab 前期准备工作
- android---实际开发中遇到的问题总结
- 手机网站点击链接触发颜色块的问题解决
- Mybatis批量操作
- Java 将String转化为Int
- C++与C#界面通讯[部分为转载,具体看附件链接]
- Leetcode007 Reverse Integer
- discuz 解决 布在内网 加载慢问题
- 页面对date的格式转化
- WebUploader文件上传(react),带参数
- JAVA的基础数据类型相关知识