Jquery Click button automatically highlight implementation principle and code

In fact, the principle is very simple, we click on the element plus a custom attr, plus there will be a matching style to automatically match the background, after a few seconds to remove the style back to the original

First of all, in their own JS to expand a method Hoverel

The 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);

}

});

Next defines the style, when a specific attr is added

The 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:

The code is as follows:

$ (e.target). Hoverel ();