废话不多说，上代码

<!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. Python之路，第十三篇：Python入门与基础13

    python3   模块 模块 Module 概念: 模块是一个保护有一系统变量.函数.类等组成的程序组: 模块是一个文件,模块文件名通常以.py 结尾: 作用:让一些相关的变量,函数, 类等有逻辑的 ...

  2. textarea（多行文本域）

    多行文本域<textarea>: <textarea name="..." rows="..." cols="..." . ...

  3. flask使用蓝图，创建副本

    随着flask的发展,flask框架越来越复杂,我们需要进行模块化处理,因为之前学过python模块化管理,我可以对一个flask程序进行简单的模块化处理. 我们都有一个博客程序,由此可知博客的前端界 ...

  4. 第十三次CCF第四题 1803——04 博弈

    我又写了一个简洁版的2.0: 可以作为博弈搜索树的模板  : https://www.cnblogs.com/xidian-mao/p/9389974.html 废话ps: 开始觉得这是一道简单得博弈 ...

  5. XXS level3

    (1)用level1和2的方法都行不通,查看PHP源代码,发现url与输入框内容都进行了过滤 <?php ini_set("display_errors", 0); $str ...

  6. 初识Odoo的辅助核算

    Odoo财务里类似辅助核算功能的叫做:Analytic Accouting,翻译为,分析会计. 再说说辅助核算是个什么东东. 财务辅助核算就是基于会计科目和会计理论分析财务数据的辅助工具. 简单的说就 ...

  7. php基础-4

    require和include require和include都是导入外部php文件的方法,使用方法为require和include关键字后接导入包(php_file)的名字的字符串形式. 当导入的包 ...

  8. [codeforces][Educational Codeforces Round 53 (Rated for Div. 2)D. Berland Fair]

    http://codeforces.com/problemset/problem/1073/D 题目大意:有n个物品(n<2e5)围成一个圈,你有t(t<1e18)元,每次经过物品i,如果 ...

  9. hdu4553 约会安排 线段树

    寒假来了,又到了小明和女神们约会的季节. 小明虽为屌丝级码农,但非常活跃,女神们常常在小明网上的大段发言后热情回复“呵呵”,所以,小明的最爱就是和女神们约会.与此同时,也有很多基友找他开黑,由于数量实 ...

  10. 纯js常用的代码

    1.获取表单中某属性的值 var name = document.myform.myname.value; 2.表单提交时校验,相应js代码中需要返回true或者false <form name ...