Jquery button automatically highlight the implementation of the principle and code

The principle is very simple, when we click we add a custom attr to the element, add it, there will be a matching style to automatically adapt the background, after a few seconds to remove the style back to the original

Start by extending a method called hoverEl in your own js

 
$.extend($.fn, { 
hoverEl:function(){ 

var _this = $(this); 
var _t = setTimeout(function(){ 
_this.attr("hover", "on"); 
}, 10); 
_this.attr("hoverTimeout", _t); 

setTimeout(function(){ 
clearTimeout( _this.attr("hoverTimeout") ); 
var _t = setTimeout(function(){ 
_this.removeAttr("hover"); 
}, 100); 
_this.attr("hoverTimeout", _t); 
},200); 

} 
}); 

Next, define the style when a particular attr is added

 
li[hover=on]{ 
background-image:-webkit-gradient(linear, 0% 100%, 0% 0%, from(#194FDB), to(#4286F5))!important; 
background-image: -webkit-linear-gradient(top, #4286F5, #194FDB)!important; 
color: white!important; 
cursor: pointer!important; 
} 

Call example:

 
$(e.target).hoverEl();