구현 원칙과 code_jquery를 자동으로 강조 표시하는 Jquery 클릭 버튼

실제로 원리는 매우 간단합니다. 클릭하면 요소에 사용자 정의 속성이 추가되고 몇 초 후에 자동으로 배경에 맞게 조정되는 스타일이 생성됩니다. 원래 상태로

먼저 자신의 js에서 hoverEl 메소드를 확장합니다

코드를 복사합니다 코드는 다음과 같습니다. 다음:

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

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

}
})


두 번째로 스타일을 정의합니다. , 특정 속성을 추가한 경우

코드 복사 코드는 다음과 같습니다. li[ hover=on]{

배경 이미지:-webkit- 그래디언트(선형, 0% 100%, 0% 0%, from(#194FDB), to(#4286F5))!important

배경 이미지; : -webkit-linear-gradient(top, #4286F5, #194FDB )!중요;
색상: 흰색!중요
커서: 포인터!중요


통화 예시:

코드 복사

코드는 다음과 같습니다. $(e.target) .hoverEl()