废话不多说，上代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  8.     <style>
  9.     html {}
  10.  
  11.     * {
  12.         margin: 0;
  13.         padding: 0;
  14.         list-style: none;
  15.     }
  16.  
  17.     .btn.active,
  18.     .active:active {
  19.         transition-duration: 0s;
  20.         background-color: #d9d9d9;
  21.     }
  22.  
  23.     .btn {
  24.         transition-duration: 3s;
  25.     }
  26.  
  27.     li {
  28.         height: 50px;
  29.         font-size: 30px;
  30.         line-height: 50px;
  31.         text-align: center;
  32.     }
  33.  
  34.     li:hover {
  35.         cursor: pointer;
  36.     }
  37.     </style>
  38. </head>
  39.  
  40. <body>
  41.     <ul>
  42.         <li class="btn">123131123131</li>
  43.         <li class="btn">li</li>
  44.         <li class="btn">li</li>
  45.         <li class="btn">li</li>
  46.     </ul>
  47.     <script>
  48.  
  49.     function fn() {
  50.         // 在body里加个事件
  51.         document.body.addEventListener('mousedown', function(e) {
  52.             var target = e.target;
  53.             // 这里的类名btn就加在你想实现效果的元素里
  54.             if (target.className.indexOf('btn') !== -1) {
  55.                 target.classList.add('active');
  56.             }
  57.         }, false);
  58.         document.body.addEventListener('mouseup', function(e) {
  59.             var target = e.target;
  60.             if (target.className.indexOf('btn') !== -1) {
  61.                 target.classList.remove('active');
  62.             }
  63.         }, false);
  64.     }
  65.    fn();
  66.  
  67.     </script>
  68. </body>
  69.  
  70. </html>

关于HTML元素点击的时候，背景颜色秒进，缓缓退出的方法的更多相关文章

  1. (网页)angular中实现li或者某个元素点击变色的两种方法(转)

    转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...

  2. 【百度统计】设置页面元素点击事件转化pv、uv

    html元素点击事件内添加代码:_hmt.push(['_trackEvent', category, action, opt_label, opt_value]); 1. '_trackEvent' ...

  3. CSS 解决z-index上层元素遮挡下层元素点击事件问题

    解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui  "2.8.2" Vue 2.9.6 需求 ...

  4. win7系统窗口背景颜色设置为护眼色的方法---打开的任意窗口显示为护眼色，程序眼必备

    win7系统窗口背景颜色设置为护眼色的方法 1. 打开"窗口颜色与外观"对话框 方法1:从控制面板开始 控制面板\外观和个性化\个性化\窗口颜色和外观 方法2:桌面上鼠标右键,个性 ...

  5. html中如何实现表格移入移出时背景颜色改变？（两种方法）

    html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...

  6. 取消a标签在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -m ...

  7. 取消a标签或者onclick在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(, , , ); -webkit-user-select: none; -moz-user-fo ...

  8. Android中的ListView点击时的背景颜色设置

    想设置listview中每行在点击.选中等不同状态下有不同的背景颜色,或者背景图片. 这可以用Android的Selector来实现.它可以定义组件在不同状态下的显示方式. 新建一个xml文件list ...

  9. css取消a标签在移动端点击时的背景颜色

    一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz ...

随机推荐

  1. JavaBasic_10

    JVM中的对一个对象的所有初始化动作,是javac在字节码文件中帮我们生成的 1.成员变量的显式初始化 2.初始化代码块(构造代码块) 3.构造方法 初始化静态的东西 在Java中,一个没有方法体的方 ...

  2. [LeetCode&Python] Problem 13. Roman to Integer

    Roman numerals are represented by seven different symbols: I, V, X, L, C, D and M. Symbol Value I 1 ...

  3. select标签（下拉菜单和列表）

    下拉菜单和列表标签: <select> <option value="..." >选项</option> <option value=&q ...

  4. java关键字详解----static

    Java Static关键字详解   提起static关键字,相信大家绝对不会陌生,但是,想要完全说明白,猛的一想,发现自己好像又说不太明白... ...比方说,昨天被一个同学问起的时候... ... ...

  5. js知识点: 数组

    1.行内元素  margin  padding 左右值都有效,上下值都无效 2.var ev = ev || window.event document.documentElement.clientW ...

  6. hdu-2196 树形dp 求一个树中所有节点能到达的最远距离f[i] （其实也不难嘛!)

    #include <bits/stdc++.h> using namespace std; ; struct T { int to; int w; }; vector < vecto ...

  7. PTA——天平找小球

    PTA 7-22 用天平找小球 #include<stdio.h> int main() { int a,b,c; scanf("%d%d%d",&a,& ...

  8. input的焦点事件

    <body> <h3>表单中文本框的focus和blur事件</h3> <input id="txtest" type="tex ...

  9. 黑马-Spring与数据库

    Spring与数据库 Spring与jdbc 引入dataSource 在客户端 模板编程 类的结构图, 真正干活的是JdbcTemplate(底层实现,操作 excute方法) JdbcTempla ...

  10. 世界各个地区WIFI 2.4G及5G信道划分表（附无线通信频率分配表）

    参考:https://blog.csdn.net/dxpqxb/article/details/80969760 目前主流的无线WIFI网络设备802.11a/b/g/n/ac: 传统 802.11 ...