废话不多说，上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <style> html {} * { margin: 0; padding: 0; list-style: none; } .btn.active, .active:active { transition-duration: 0s; background-color: #d9d9d9; } .btn { transition-duration: 3s; } li { height: 50px; font-size: 30px; line-height: 50px; text-align: center; } li:hover { cursor: pointer; } </style> </head> <body> <ul> <li class="btn">123131123131</li> <li class="btn">li</li> <li class="btn">li</li> <li class="btn">li</li> </ul> <script> function fn() { // 在body里加个事件 document.body.addEventListener('mousedown', function(e) { var target = e.target; // 这里的类名btn就加在你想实现效果的元素里 if (target.className.indexOf('btn') !== -1) { target.classList.add('active'); } }, false); document.body.addEventListener('mouseup', function(e) { var target = e.target; if (target.className.indexOf('btn') !== -1) { target.classList.remove('active'); } }, false); } fn(); </script> </body> </html>
