I don't say much nonsense , Code up

<!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() {
// stay body There's an incident in Riga
document.body.addEventListener('mousedown', function(e) {
var target = e.target;
// The class name here btn Add it to the elements you want to achieve the effect
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>

About HTML When the element clicks , Background color in seconds , More articles on the slow exit method

  1. ( Webpage )angular To realize li Or two ways to change color by clicking on an element ( turn )

    From script house : This article mainly introduces angular To realize li Or two ways to change color by clicking on an element , Very practical value , Friends in need can refer to This paper introduces angular To realize li Or two ways to change color by clicking on an element , Share ...

  2. 【 Baidu statistics 】 Set page elements, click event conversion pv、uv

    html Add code to the element click event :_hmt.push(['_trackEvent', category, action, opt_label, opt_value]); 1. '_trackEvent' ...

  3. CSS solve z-index The problem of the upper level elements blocking the lower level elements' click events

    solve z-index The problem of the upper level elements blocking the lower level elements' click events by: Give the guest  QQ:1033553122 development environment Win 10 element-ui  "2.8.2" Vue 2.9.6 demand ...

  4. win7 How to set the background color of the system window as eye protection color --- Open any window to show eye protection , The eye of the program must

    win7 How to set the background color of the system window as eye protection color 1. open " Window color and appearance " Dialog box Method 1: Start with the control panel Control panel \ Appearance and personalization \ Individualization \ Window color and appearance Method 2: Right click on the desktop , personality ...

  5. html How to change the background color when the table is moved in or out ?( The two methods )

    html How to change the background color when the table is moved in or out ?( The two methods ) One . summary 1. adopt css Of table Labeled hover attribute : 10 #tab:hover{ 11 background: green 12 } ...

  6. Cancel a The background color of the tag when it is clicked on the mobile terminal

    One . Cancel a The blue color of the tag when it is clicked on the mobile terminal -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none; -m ...

  7. Cancel a Labels or onclick Background color when clicking on the mobile terminal

    One . Cancel a The blue color of the tag when it is clicked on the mobile terminal -webkit-tap-highlight-color: rgba(, , , ); -webkit-user-select: none; -moz-user-fo ...

  8. Android Medium ListView Background color settings when clicking

    Want to set listview Click on each line in . There are different background colors in different states , Or the background image .  It works Android Of Selector To achieve . It can define how components are displayed in different states . Create a new one xml file list ...

  9. css Cancel a The background color of the tag when it is clicked on the mobile terminal

    One . Cancel a The blue color of the tag when it is clicked on the mobile terminal -webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz ...

Random recommendation

  1. C# Get the server from IP, client IP And the physical address of the network card

    client ip: Request.ServerVariables.Get("Remote_Addr").ToString(); Client hostname : Request.ServerVariab ...

  2. CWnd class

    CWnd Class members . Data member m_hWnd It's related to this CWnd Object is associated with HWND Handle . Structure and deconstruction CWnd Construct a CWnd object DestroyWindow Destroy the associated Windows window . initial ...

  3. iOS Transition animation

    Wen Dingding I'm afraid you'll never do anything in your life Also comforts oneself ordinary valuable iOS Development UI piece — Core Animation ( Transition animation and group animation ) iOS Development UI piece — Core Animation ( Transition animation and group animation ) One . A brief introduction to transition animation CAAnimation Subclasses of , be used for ...

  4. ORA-12545: Connect failed because target host or object does not exist

    [oracle@ybdbtest oradata]$ sqlplus /nolog SQL*Plus: Release 9.2.0.4.0 - Production on Thu Jun 26 10: ...

  5. thinkphp Alipay error Class &#39;Think&#39; not found

    Class 'Think' not found D:\www\DonatePlatform\ThinkPHP\Extend\Vendor\alipay\lib\alipay_submit.class. ...

  6. CentOS Use yum Command installation error prompt ”could not retrieve mirrorlist http://mirrorlist.centos.org ***”

    perform yum The above error occurred during the command ; resolvent : vi /etc/sysconfig/network-scripts/ifcfg-eth0 This paragraph is for your network card to modify the frame part of the diagram And then restart :reboot

  7. poj3278 Catch That Cow( Simple one dimension bfs)

    http://poj.org/problem?id=3278                                                                       ...

  8. vxlan Simple understanding vs calico A network model

    1.vxlan(virtual Extensible LAN) Virtual scalable lan , It's a kind of overlay Network technology , Use MAC in UDP The way to Line encapsulation , common 50 Encapsulation header of byte . 2.VTEP For virtual machines ...

  9. #C++ Beginners record ( High precision operation )( Add )

    High precision operation Whether it's int still double Also, or long long , These defined variables all have certain limits on the range of data , In calculating the number of more than ten digits , That is, beyond their own data range , Cannot compute with existing types , You have to go through it yourself ...

  10. C/C++ Language foundation

    1. One subclass contains objects of other classes , Then the order of constructors is ? Execute the base class first ( If there is a virtual base class in the base class , To execute the virtual base class first , The other base classes are executed in the order in which the derived classes are declared ), In the execution of the member object , Finally, carry out your own . 2.spri ...