실제로 원리는 매우 간단합니다. 클릭하면 요소에 사용자 정의 속성이 추가되고 몇 초 후에 자동으로 배경에 맞게 조정되는 스타일이 생성됩니다. 원래 상태로
먼저 자신의 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);
}
})
두 번째로 스타일을 정의합니다. , 특정 속성을 추가한 경우
배경 이미지:-webkit- 그래디언트(선형, 0% 100%, 0% 0%, from(#194FDB), to(#4286F5))!important
배경 이미지; : -webkit-linear-gradient(top, #4286F5, #194FDB )!중요;
색상: 흰색!중요
커서: 포인터!중요
통화 예시:
코드 복사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
