-webkit-tap-highlight-color 与移动端页面模拟按钮hover效果

-webkit-tap-highlight-color 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。

当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。
该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。

css属性 :active

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <style type="text/css">
        a {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .btn-div, .btn-a {
            display: block;
            width: 100px;
            height: 50px;
            line-height: 42px;
            text-align: center;
            border-radius: 4px;
            font-size: 18px;
            color: #FFFFFF;
            background-color: #4185F3;
        }

        .btn-div:active {
            background-color: yellowgreen;
        }

        .abtn {
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .abtn:active {
            background-color: yellow;
            color: aqua;
        }
    </style>
</head>
<body>
<div class="btn-div">div按钮</div>
<div class="btn-a"><a class="abtn" href="###">a按钮</a></div>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 3,519评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 4,631评论 0 26
  • 感恩昨天分享会的圆满成功,感恩自己克服困难到了现场聆听姐妹们的智慧分享。感恩大嫂每次都热情慷慨不怕麻烦的把我们带到...
    寸心洁白阅读 259评论 0 1
  • 十年之前,我不认识你。十年之后我们在这个世界相遇,但是你不认识我。没关系,我会在这个世界的一角陪你度过漫长岁月,这...
    他的南客阅读 318评论 2 2
  • 爱上一 座古城 恋上一位名人 岁月忽然已晚 指尖苍凉冰冷 握住剩一名字 如空中一弯月
    梦双眸阅读 493评论 0 11