废话不多说，上代码

<!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>

关于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. Java基础（2）面向对象和封装，对象的创建和使用、java对象的内存图

    1 类和对象 类:是一类事物的描述,抽象的.猫 对象:是一类事物的实例,具体的.某只猫 2 类的定义 成员变量和成员方法 //定义一个学生类 public class Student { //成员变量 ...

  2. Linux make menuconfig查找并快速跳转指定驱动选项

    /********************************************************************** * Linux make menuconfig查找并快速 ...

  3. Linux矫正时间

    ntpdate -u ntp.api.bz 可以写到定时任务里,每天矫正一次

  4. css实现两栏布局，左侧固定宽，右侧自适应的7中方法

    一个面试会问的问题,如何实现两个盒子,左侧固定宽度,右侧自适应. 1.利用 calc 计算宽度的方法 css代码如下: .box{overflow: hidden;height: 100px;marg ...

  5. weixin-java-mp集成微信公众号自带客服功能

    电脑端登录公众号管理后台,[添加功能插件]开通客服功能,输入"人工客服"接入客服热线 底部有我的微信二维码,如有问题,可加好友进行技术交流! ​ ​ ​ ​ ​ ​ ​ weixi ...

  6. vim 介绍安装 复制 剪切 粘贴

    1. vim 产生:对于linux 文件的编辑,最初是vi,然后对于其功能的扩展,就产生了vim vim 的安装 yum install vim 2.光标的移动 用得最多的就是方向键上的 上下左右,和 ...

  7. 初始if..else 条件语句

    if..else条件语句 如果我们希望有效的响应用户的输入,代码就需要具有判断能力.能够让程序进行判断的结构成为条件,条件判断语句返回的是布尔值真或假,真就执行一条线路,假就执行另外一条线路 if 条 ...

  8. react 简书开发笔记

    详见文章<React简书开发实战课程笔记>

  9. 线性代数及其应用 (David C.Lay, Steven R.Lay 著)

    第1章 线性代数中的线性方程组 (已看) 介绍性实例 经济学与工程中的线性模型 1.1 线性方程组 1.2 行化简与阶梯形矩阵 1.3 向量方程 1.4 矩阵方程Ax=b 1.5 线性方程组的解集 1 ...

  10. C# Winform 怎么让按钮在Panel里居中显示

    把pannel里面的多个按钮的那个anchor属性全部去掉,如下图: 再用VS2010自带的工具调一下即可: 小注: 有的时候我们却想子控件在父控件里的相对位置不要随着父控件的变大缩小而变化,或者控件 ...