废话不多，上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; list-style: none; } .btn.active, .active:active{ transition-duration: 0s; background-color: #d9d9d9; } .btn{ transition-duration: 3s; } li{ height: 30px; line-height: 30px; text-align: center; } </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> var uu = document.getElementsByTagName(‘ul‘)[0]; uu.addEventListener(‘mousedown‘,function(e){ var target = e.target; target.classList.add(‘active‘); }) uu.addEventListener(‘mouseup‘,function(e){ var target = e.target; target.classList.remove(‘active‘); }) </script> </body> </html>
原文：https://www.cnblogs.com/hill-foryou/p/9083811.html