zoukankan      html  css  js  c++  java
  • 模拟按钮hover效果

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
     6 <meta content="yes" name="apple-mobile-web-app-capable">
     7 <meta content="black" name="apple-mobile-web-app-status-bar-style">
     8 <meta content="telephone=no" name="format-detection">
     9 <meta content="email=no" name="format-detection">
    10 <style type="text/css">
    11 a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
    12 .btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
    13 .btn-blue:active{background-color: #357AE8;}
    14 </style>
    15 </head>
    16 <body>
    17 
    18 <div class="btn-blue">按钮</div>
    19 
    20 <script type="text/javascript">
    21 document.addEventListener("touchstart", function(){}, true)
    22 </script>
    23 </body>
    24 </html>

    兼容性ios5+、部分android 4+、winphone 8

    要做到全兼容的办法,可通过绑定ontouchstart和ontouchend来控制按钮的类名

    <!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-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
    .btn-blue-on{background-color: #357AE8;}
    </style>
    </head>
    <body>
    
    <div class="btn-blue">按钮</div>
    
    <script type="text/javascript">
    var btnBlue = document.querySelector(".btn-blue");
    btnBlue.ontouchstart = function(){
        this.className = "btn-blue btn-blue-on"
    }
    btnBlue.ontouchend = function(){
        this.className = "btn-blue"
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    lnmp配置Yii2规则
    vue中前进刷新、后退缓存,列表缓存和回到原位置
    vue 或者传统h5移动端input被输入法键盘挡住解决方法
    uni-app知识
    typescript
    flow
    js点击按钮分别实现全屏以及退出全屏的方法
    vue.config.js配置本地,测试,开发环境变量
    git常用指令
    Git指令
  • 原文地址:https://www.cnblogs.com/webgg/p/5341764.html
Copyright © 2011-2022 走看看