平时在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才能真正有效果。
以上就是移动端iPad浏览器Safari按钮动态按压效果的详细内容，更多关于移动端iPad浏览器Safari按钮动态按压效果的资料请关注九品源码其它相关文章！