«

移动端iPad浏览器Safari按钮动态按压效果

时间：2024-3-3 10:50 作者：韩俊 分类： Html+Css

平时在PC端开发页面，通过CSS样式的hover就可以实现按钮的效果，但转移到手机移动端是就无法实现了，如何解决呢？

.abc{border:0; width:480px; height:170px;
    transition: width .2s;
    -moz-transition: width .2s; /* Firefox 4 */
    -webkit-transition: width .2s; /* Safari 和 Chrome */
    -o-transition: width .2s; /* Opera */
}

.abc:active
{
    width:450px;
}

<img src="images/pad-1.png" class="abc" />

以上是CSS代码和图片绑定的abc样式。但是转到移动端就没有效果了，如何实现呢？添加以下代码就可以解决：

<script>
      document.body.addEventListener('touchstart', function (){});
</script>

一般能在网上查到的解决办法都是这个，但大都容易忽略一个问题

<body touchstart>

一定要在body中加入touchstart才能真正有效果。

标签: javascript html css