移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
name="viewport"> <style> .btn{ display: block; position: relative; top: 100px;
margin: 20px; width: 200px; height: 50px; line-height: 50px; text-align:
center; border-radius: 5px; font-size: 18px; color: salmon; background-color:
skyblue; } .btn-on{ background-color: slateblue; } </style> </head> <body> <div
class="btn"></div> <script> var btn=document.querySelector(".btn");
btn.ontouchstart=function(){ this.className="btn btn-on"; }
btn.ontouchend=function(){ this.className="btn"; } </script> </body> </html>

技术
©2019-2020 Toolsou All rights reserved,
MySQL触发器【linux】shell:简单的shell脚本练习java连接数据库实现基本的增删改查Windows网络服务渗透测试实战-跨网段攻击JavaScript百炼成仙 1.15 天秀idea运行Mybatis项目出现的常见错误(编码错误等)Java实现自动猜数(猜数游戏进阶版)VHDL——4位移位寄存器【微信小程序学习】网易云音乐歌曲详情页代码实现一份笔记让你从 15K 涨薪并跳槽到32K+16