关于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 ...
随机推荐
- Android.mk使用第三方库方法
/********************************************************************** * Android.mk使用第三方库方法 * 说明: * ...
- 当BeanUtils遇到泛型
前言: BeanUtils(spring版/apache版)工具极大方便了java developer, 尤其在写业务代码中, 各种域模型DO, BO, VO等对象之间的复制. 但使用BeanUtil ...
- [error]OpenCV Error: Assertion failed (ssize.width > 0 && ssize.height > 0) in resize, file modules/imgproc/src/resize.cpp, line 3289
error OpenCV Error: Assertion failed (ssize.width > && ssize.height > ) terminate call ...
- Damped Track 阻尼跟随
Damped Track 阻尼跟随 https://www.youtube.com/watch?v=pd1od5WPCUw 2个网格及对应的2个空对象Z轴方向网格:{O.up}; 上方园孔把手中间放空 ...
- 【HDOJ1051】【排序+LIS】【贪心】
http://acm.hdu.edu.cn/showproblem.php?pid=1051 Wooden Sticks Time Limit: 2000/1000 MS (Java/Others) ...
- hdu2461 Rectangles 线段树--扫描线
You are developing a software for painting rectangles on the screen. The software supports drawing s ...
- JPI中常使用的类介绍：
Math类: java.lang包下的 final,不可被继承, 其中的方法和属性都是静态的 其构造方法私有化了,其他类不可以使用构造方法. 向上取整:Math.ceil(double d); 向下取 ...
- ApplicationContext之getBean方法详解
转自:http://www.sohu.com/a/115194552_466964 我们知道可以通过ApplicationContext的getBean方法来获取Spring容器中已初始化的bean. ...
- gorm-Duplicate-entry
gorm insert data to mysql tips: (Error 1062: Duplicate entry '267857' for key 'PRIMARY') reason: u ...
- linux查看网络信息命令
#遇到一条很长的命令怎么办,想换行的时候在末尾增加\符号就可以换行继续输入命令了 #在ifconfig内容中找出ip [root@bogon ~]# ifconfig ens33|grep " ...