废话不多说，上代码

<!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. maven工程的多环境配置方案(profile)

    前言: 写一篇水文来打发下时间吧^_^. 在应用开发中, 总会遇到开发/测试/预发布/线上环境, 其环境不同, 其具体的配置项也有所不同, 因此如何快速的切换各个环境配置, 进行打包配置, 成了一个小 ...

  2. 【c++】函数默认参数

    c++ Prime Plus sixth edition page274 如何设置默认值呢?必须通过函数原型. 只有原型指定了默认值.函数定义与没有默认参数时完全相同. 参考 1. http://ww ...

  3. parson json解析

    最近交互数据中用到JSON数据,很多年以前用过CJSON解析和生成JSON数据,貌似CJSON已经发展成为了libjson,本打算用libjson库,不过其提供的解析JSON方式采用了回调,是测试过程 ...

  4. 优先队列（挑程）poj 2431

    每次写poj的题都很崩溃,貌似从来没有一次一发就ac的,每次都有特别多的细节需要考虑.还有就是自己写的太粗糙了,应该把每种情况都想到的,总是急着交,然后刷一页wa. 优先队列直接用stl就可以,简单实 ...

  5. 导出文件为excle

    handleOutPut() { const searchData=this.state.searchData; let url = commonData.baseMerchantUrl + &quo ...

  6. Sublime Text3:插件+快捷键+环境变量设置+C/C++编译环境

    环境变量配置 如果电脑里之前下载过Codeblocks或者Dev,找到文件根目录,打开MinGw(或者MinGw64),点开bin目录,将bin文件夹的目录复制下来(以Codeblocks为例,将文件 ...

  7. C语言常用命令

    ## 基本流程:创建——编辑——编译.链接——执行$ touch 1-1.c$ vim 1-1.c # include <stdio.h>int main{printf("... ...

  8. Washing Text Animation

    https://www.youtube.com/watch?v=q0_koJLc0OgBlender Tutorial: Washing Text Animation 需要用到插件, 进入用户设置的插 ...

  9. mysql给数据库授权与收回权限--------dcl

    用户授权语法 grant 权限1,权限2... on 数据库名.* to 用户名 @IP地址或% 打开新创建的名为“test”的数据库后 用 show databases;  的命令 看内部的数据结果 ...

  10. 【JVM】参数配置

    [一]JVM参数配置释意 编号 配置项 例子 含义 备注 1 -Xmx -Xmx20m java应用最大可用内存为20M  整个JVM内存大小=年轻代大小 + 年老代大小 + 持久代大小.持久代一般固 ...