zoukankan      html  css  js  c++  java
  • 解决移动端点击链接触发的颜色块

    前言

    在做手机页面的时候碰到了这样一个问题:手指点击某一个链接的时候触发了一个半透明的颜色块。类似如图:

    但是淘宝和京东的手机端没有类似出现这样的情况,所以应该是有这么一个禁止触发的属性,因为在 a 链接触发的所以,所以审查元素找到a链接的状态,但是发现他们的a链接是没有设置任何的,但是在根属性发现这么一个属性-webkit-tap-highlight-color:rgba(0,0,0,0)于是百度了一下,于是找到了愚人码头关于webkit私有属性的一些知识,原来确实是有可以覆盖这个行为的属性。

    基础知识

    属性名: -webkit-tap-highlight-color
    属性值: color color是指css3带Alpha的color
    初始值: inherit
    应用于: a链接的标签,或者带有javascript可点击的元素

    官方解释如下:

    描述:假如指定,那么这个值遵循Alpha值,假如不指定,那么调用默认的Alpha值,假如设置alpha的值为0,点击元素禁用高亮,假如设置alpha为1,那么点击元素的时候将会不可见。

    支持系统: iOS 1.1.1 以上

    支持等级: Apple extension—Safari on iOS only【仅仅针对IOS中的Safari】这点跟愚人码头小出入,不过我用模拟器测试安卓系统的确实也是可以,只不过没有顺畅 欢迎反馈Android客户端的点击效果,希望可以更新_

    说明:刚刚也提到了color是需要用css3的color,也就是RGBa颜色值,具体请前往MDNrgba(x,x,x,x)前面三个值分别代表RGB,后面一个值代表alpha,数值从0~1浮动,0为全透明,1为不透明。

    测试demo:

    .none{
        -webkit-tap-highlight-color:rgba(0,0,0,0);
    }
    .have{
        -webkit-tap-highlight-color:rgba(255,0,0,1);
    }
    

    不妨拿出你的手机出来扫一扫下面的:

    后话

    做苹果 webapp 的同学不妨可以研究下 IOS 的 web 开发文档,专门是针对 IOS 的 Safari,目测对你应该会很有帮助哦,起码知道坑在哪里,该怎么填。哦,对了你不需要慢慢去找了,我下载一份PDF 格式链接地址:
    SafariCSSRef-苹果web开发文档【右键另存为】

    参考资料:
    apple-for-webkit-tap-highlight-color

    本文转自:http://www.html-js.com/article/2588

  • 相关阅读:
    python学习(四)流程控制语句
    python学习(三)运算符
    python学习(二)数据类型转换
    python学习(一)基本数据类型
    mysql学习-mysql分页查询
    装饰器
    迭代器与生成器
    深入解析类对象与类实例的创建过程
    深入理解Python中的元类---metaclass
    flask源码解析之DispatcherMiddleware
  • 原文地址:https://www.cnblogs.com/tnnyang/p/5141142.html
Copyright © 2011-2022 走看看