Jquery click the button to automatically highlight implementation principle and code

In fact, the principle is very simple. When we click it, we add a custom attr to the element, and a matching style will automatically adapt to the background. After a few seconds, the style will be removed and restored to its original state.

First, expand the hoverEl method in your own js.
Copy codeThe Code is as follows:
$. 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 );

}
});

Second, define the style. When a specific attr is added
Copy codeThe Code is as follows:
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:
Copy codeThe Code is as follows:
Objects (e.tar get). hoverEl ();