关于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 ...
随机推荐
- apache php upload file
/********************************************************************************* * apache php uplo ...
- NET Core MVC中创建PDF
使用Rotativa在ASP.NET Core MVC中创建PDF 在本文中,我们将学习如何使用Rotativa.AspNetCore工具从ASP.NET Core中的视图创建PDF.如果您使用ASP ...
- HTML中嵌套的子frame如何访问父页面中的函数？
我解决的办法,在父页面写了个函数,然后在frame页面调用父页面的函数,具体代码如下: 父:function a(){} 子frame:window.parent.a(); 问题迎刃而解 https: ...
- Chrome （开发者工具）快捷键
https://9iphp.com/web/javascript/chrome-devtools-shortcuts.html https://www.cnblogs.com/davidwang456 ...
- ionic后台返回的数据是html模板的时候，解析html文件的方法：
1.后台返回来的数据格式是: { "state":"100", "data":[ {"Content": "\ ...
- 【shell编程】之基础知识了解shell
一.什么是shell Shell 是一个用 C 语言编写的程序,它是用户使用 Linux 的桥梁.Shell 既是一种命令语言,又是一种程序设计语言. Shell 是指一种应用程序,这个应用程序提供了 ...
- 芯灵思SinlinxA33开发板Linux内核定时器编程
开发平台 * 芯灵思SinlinxA33开发板 淘宝店铺: https://sinlinx.taobao.com/ 嵌入式linux 开发板交流 QQ:641395230 Linux 内核定时器是内核 ...
- itcast-svn
svn介绍 1.1 svn服务器的工作方式 数据 库 服务 概念 使用数据库,连接服务,服务操作库 独立服务器方式: svnserve 借助Apache方式: mod_dav_svn ...
- oracle数据库丢失数据文件、控制文件、重做日志文件、初始化文件恢复方法
rman target/ list backup; 查看是否已备份,如果没有,那就不知道了 模拟故障,删除/u01/app/oracle/oradata/ORCL文件夹下的所有文件 sqlplus ...
- shell批量创建随机文件名格式文件
//随机生成文件 //文件名会带数字的...注意echo后面的是反引号,不是单引号 #!/bin/bash dir=/root/bp for i in 'seq 10' touch $dir`echo ...