废话不多说，上代码

<!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. 获取div，表单中的内容

    获得内容 - text().html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元 ...

  2. lesson1-fastai

    fast-ai系统资料https://www.jianshu.com/p/2fe22a6b0ecb 中文视频 https://www.bilibili.com/video/av10156946/ind ...

  3. resNet代码-小象/cv

    C:\yyy\ml\dengsong\ChinaHadoop\ChinaHadoop_C4-master\ChinaHadoop_C4-master\C4_ResNet_TF http://blog. ...

  4. js 下载文件的操作方法

    https://blog.csdn.net/zhoumengshun/article/details/71405963

  5. SSAS aggregation 的作用及其使用

    作用: 聚合是为了解决查询在运行时的效率低下,在数据立方体部署的时候进行聚合,实际上是对数据立方体的预处理,方便以后查询.如若在部署时未进行聚合,则在以后每次查询时实际上都会进行一次集合的操作,等待结 ...

  6. Python学习手册

    基础 概念 源码编译为字节码,解释器解释字节码 CPython是python标准实现方式,Jython将源码编译为java字节码,运行在JVM上 优点:快速开发,灵活的核心数据类型,优美的缩进语法,垃 ...

  7. MySQL数据库-外键链表之一对多，多对多

    外键链表之一对多 外键链表:就是a表通过外键连接b表的主键,建立链表关系,需要注意的是a表外键字段类型,必须与要关联的b表的主键字段类型一致,否则无法创建索引 一对多:就是b表的某一个字段值对应a表外 ...

  8. html2canvas用法的总结(转载)

    最近做h5网页,有个功能是用户能长按页面保存为图片,在我们理解就是网页要生成图片然后再让用户长按保存,然后就发现了html2canvas这个框架了,效果挺不错了,但是有几个坑说一下(用的最新版): h ...

  9. maven(一)

    Maven的简介 什么是maven 是apache下的一个开源项目,是纯java开发,并且只是用来管理java项目的 Maven好处 普通的传统项目 maven项目 分析:maven项目为什么这么小? ...

  10. struts2(二)值栈 threadlocal ogal ui

    值栈(重要)和ognl表达式 1.  只要是一个mvc框架,必须解决数据的存和取的问题 2.  Struts2利用值栈来存数据,所以值栈是一个存储数据的内存结构 3.  把数据存在值栈中,在页面上利用 ...