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 ...