关于HTML元素点击的时候，背景颜色秒进，缓缓退出的方法
废话不多说，上代码
<!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元素点击的时候，背景颜色秒进，缓缓退出的方法的更多相关文章
- (网页)angular中实现li或者某个元素点击变色的两种方法(转)
转自脚本之家: 本篇文章主要介绍了angular中实现li或者某个元素点击变色的两种方法,非常具有实用价值,需要的朋友可以参考下 本文介绍了angular中实现li或者某个元素点击变色的两种方法,分享 ...
- 【百度统计】设置页面元素点击事件转化pv、uv
html元素点击事件内添加代码:_hmt.push(['_trackEvent', category, action, opt_label, opt_value]); 1. '_trackEvent' ...
- CSS 解决z-index上层元素遮挡下层元素点击事件问题
解决z-index上层元素遮挡下层元素点击事件问题 by:授客 QQ:1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 需求 ...
- win7系统窗口背景颜色设置为护眼色的方法---打开的任意窗口显示为护眼色，程序眼必备
win7系统窗口背景颜色设置为护眼色的方法 1. 打开"窗口颜色与外观"对话框 方法1:从控制面板开始 控制面板\外观和个性化\个性化\窗口颜色和外观 方法2:桌面上鼠标右键,个性 ...
- html中如何实现表格移入移出时背景颜色改变？（两种方法）
html中如何实现表格移入移出时背景颜色改变?(两种方法) 一.总结 1.通过css的table标签的hover属性: 10 #tab:hover{ 11 background: green 12 } ...
- 取消a标签在移动端点击时的背景颜色
一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -m ...
- 取消a标签或者onclick在移动端点击时的背景颜色
一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(, , , ); -webkit-user-select: none; -moz-user-fo ...
- Android中的ListView点击时的背景颜色设置
想设置listview中每行在点击.选中等不同状态下有不同的背景颜色,或者背景图片. 这可以用Android的Selector来实现.它可以定义组件在不同状态下的显示方式. 新建一个xml文件list ...
- css取消a标签在移动端点击时的背景颜色
一.取消a标签在移动端点击时的蓝色 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz ...
随机推荐
- Ubuntu16.04通过GPT挂载硬盘
一般而言,服务器上挂载的硬盘都是比较大的,传统的对硬盘进行分区需要在终端敲sudo fdisk进行操作,但是, 当挂载的硬盘的容量大于2T的时候,是无法通过sudo fdisk进行挂载的,这个时候必须 ...
- 求强连通分量Tarjan算法
]; // 时间戳 ; // 时间 ]; // 节点u所能访问到的最小时间戳 ]; // 节点u是否在栈中. ]; ; // 我们维护的信息. ]; // 给节点染色, 同一个连通块的节点应该是同一个 ...
- mac上不了网
不知怎么回事勾选了socks代理导致ping的通但打不开网页软件登不了
- 陕西师范第七届K题----动态规划
ps: 自己的方法绝对是弱爆了 肯定存在更优的方法 O(n^3)复杂度 暴力求解的.. 链接:https://www.nowcoder.com/acm/contest/121/K来源:牛客网 柯怡最近 ...
- 洛谷P4147 玉蟾宫（动规：最大子矩形问题/悬线法）
题目链接:传送门 题目大意: 求由F构成的最大子矩阵的面积.输出面积的三倍. 1 ≤ N,M ≤ 1000. 思路: 悬线法模板题. #include <bits/stdc++.h> us ...
- Beta周第14次Scrum会议(11/23)【王者荣耀交流协会】
一.小组信息 队名:王者荣耀交流协会 小组成员 队长:高远博 成员:王超,袁玥,任思佳,王磊,王玉玲,冉华 小组照片 二.开会信息 时间:2017/11/23 17:02~17:14,总计12min. ...
- c++——基本概念
如何理解c/c++中的指针?每种编程语言都使用指针,但Java.c#等将指针隐藏,而c/c++将指针暴露给了用户(程序员)https://www.cnblogs.com/gxcdream/p/4805 ...
- 系统间通信——RPC架构设计
架构设计:系统间通信(10)——RPC的基本概念 1.概述经过了详细的信息格式.网络IO模型的讲解,并且通过JAVA RMI的讲解进行了预热.从这篇文章开始我们将进入这个系列博文的另一个重点知识体系的 ...
- django -----分页器组件
分页器组件 本文目录 1 Django的分页器(paginator)简介 2 应用View层 3 模版层 index.html 4 扩展 回到目录 1 Django的分页器(paginator)简介 ...
- 《DSP using MATLAB》Problem 6.8
代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...