移动端 按钮按下时 颜色改变

html:

<button class="friend">确定</button>

css:

*{
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
button{
    width: 80%;
    height: 50px;
    background: #f66;
    border: 0;
    color: #fff;
    border-radius: 5px;
    font-size: 20px;
}

js:

$(".friend").on("touchstart", function() {
      $(this).css({opacity:0.8});
}).on("touchend", function() {
      $(this).css({opacity: 1});
});
$(".friend").on("click",function(){
      alert(0)
 })

效果:
《移动端 按钮按下时 颜色改变》 按钮正常

《移动端 按钮按下时 颜色改变》 按钮按下时

    原文作者:jiaomeichen
    原文地址: https://www.jianshu.com/p/9566e92f009c
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞