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
$ .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
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();
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