废话不多说，上代码

<!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. 增加临时表空间组Oracle11g单实例

    #需求,测试库与生产库,临时表空间同步一致 #经过查询生产环境,数据库默认临时表空间,为临时表空间组,有三个成员,三个临时表空间,每个临时表空间一个数据文件,自动扩展 #使用临时表空间组的优点,减少不 ...

  2. HDU - 3982：Harry Potter and J.K.Rowling（半平面交+圆与多边形求交）（WA ing）

    pro:给定一枚蛋糕,蛋糕上某个位置有个草莓,寿星在上面切了N刀,最后寿星会吃含有草莓的那一块蛋糕,问他的蛋糕占总蛋糕的面积比. sol:显然需要半平面交求含有蛋糕的那一块,然后有圆弧,不太方便求交. ...

  3. HDU 1425 C++使用sort函数

    sort Time Limit: 6000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submissi ...

  4. 【次小生成树】【Kruskal】【prim】【转】

    原博客出处:https://blog.csdn.net/yasola/article/details/74276255 通常次小生成树是使用Prim算法进行实现的,因为可以在Prim算法松弛的同时求得 ...

  5. Python 3 运行 shell 命令

    #python 3.5 , win10 引入包 #os.chdir('path') import osimport subprocess #https://docs.python.org/3.5/li ...

  6. LeetCode - Reorganize String

    Given a string S, check if the letters can be rearranged so that two characters that are adjacent to ...

  7. 【liunx】linux后台执行命令：&和nohup

    当我们在终端或控制台工作时,可能不希望由于运行一个作业而占住了屏幕,因为可能还有更重要的事情要做,比如阅读电子邮件.对于密集访问磁盘的进程,我们更希望它能够在每天的非负荷高峰时间段运行(例如凌晨).为 ...

  8. xencenter创建快照和恢复快照

    创建快照 恢复快照

  9. linux服务器的日志管理

    消息紧急程度排行 emerg:该系统不可用 alert:需要立即修改 crit:紧急情况 err:错误信息 warning:预警信息 notice:具有重要性的普通条件 info:提供信息的消息 de ...

  10. HotSpot VM GC 的种类

    collector种类 GC在 HotSpot VM 5.0里有四种: incremental (sometimes called train) low pause collector已被废弃,不在介 ...