Home  >  Article  >  Web Front-end  >  Jquery click button to automatically highlight implementation principle and code_jquery

Jquery click button to automatically highlight implementation principle and code_jquery

WBOY
WBOYOriginal
2016-05-16 16:51:051105browse

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

First extend a method hoverEl in your own js

Copy the code 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);

}
});

Secondly define the style, when a specific attr is added
Copy code 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:
Copy code The code is as follows:

$(e.target).hoverEl();
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn