• 手机浏览器wap网页点击链接触发颜色区块的问题解决办法


    引子

    在做HTML5 WAP网页的时候,一行内容做了2个链接,点击一个标签的时候,整个块会闪一下,影响美观。需求针对这种情况来问我,能否把这个去掉。我当时就想,这个怎么去?那我也不好直接回绝她,好吧,我试试吧!经过研究,百度的很多a标签都是一闪一闪的,有颜色块,但是淘宝和京东的手机端就没有这种情况,这是如何做到的呢?

    研究

    通过研究他们的代码发现,在根属性中,他们设置了这样的一个属性-webkit-tap-highlight-color:(0,0,0,0)。

    下面解释一下什么是RGBA,RAG就是颜色值了,大家都知道,A就是Alpha的缩写,就是透明度的意思,多了一个透明度。那么这个

    -webkit-tap-highlight-color:(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-colorcolor

    默认值: inherit

    适用于:链接元素比如新窗口打开,img元素比如保存图像等等

    兼容性:

    iOS 1.1.1及更高版本的Safari浏览器可用。大部分android手机也是支持的,只是显示效果有所不同。

    原文地址http://www.luoxiao123.cn/1487-2.html

  • 相关阅读:
    数据集市
    大数据下的企业数据仓库建设
    大数据项目--准备
    ETL利器Kettle实战应用解析系列三 【ETL后台进程执行配置方式】
    ETL利器Kettle实战应用解析系列二 【应用场景和实战DEMO下载】
    ETL利器Kettle实战应用解析系列一【Kettle使用介绍】
    [Leetcode Weekly Contest]202
    [Leetcode Weekly Contest]200
    [Leetcode Weekly Contest]196
    [Leetcode Weekly Contest]195
  • 原文地址:https://www.cnblogs.com/lichuntian/p/5624393.html
Copyright © 2020-2023  润新知