移动端iPad浏览器Safari按钮动态按压效果
更新:2018-01-25 08:24:35
人气:4848
来源:本站原创
A+
平时在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才能真正有效果。
推荐的文章
随手记
PHP经验分享
- ● MySQLSUM在没有符合查询条件时返回结果为空的处理办法
- ● 如何开启PHP8的JIT提升运行速度
- ● 钉钉API接口-用PHP+Curl实现获取用户信息
- ● 钉钉API接口-用PHP+Curl实现获取应用Access_Token
- ● 在PHP中使用CURL,“撩”服务器只需几行——phpcurl详细解析和常见大坑
- ● MySQLInnodb并发涉及参数说明
- ● mysql参数调优之innodb_thread_concurrency、innodb_concurrency_tickets合理的使用cpu性能
- ● PHP用fsockopen检测指定IP端口是否开启可用
- ● PHP用socket检测服务器IP端口是否开放?代码示例
- ● GatewayWorker报错:Waring:Events::onMessageisnotcallable