이 기사의 예에서는 JS CSS를 사용하여 DIV 레이어의 마우스 감지 그라데이션 표시를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. JS CSS는 마우스 감지 그래디언트 표시 DIV 레이어를 구현했습니다 <스타일> #팁{ 위치:절대; 왼쪽:90px; 너비:0px; 높이:0px; 색상:#FFF; 글꼴 크기:12px; 배경색:#000; 테두리:1px 솔리드 #DEF; 필터:알파(불투명도=0); 불투명도:0; Z-색인:999; } 스타일> <br> <!--<br /> //재사용성이 높기 때문에 "지정된 dom 노드를 얻는" 함수를 정의합니다 <br /> 함수 $(d){return document.getElementById(d);}<br /> //점진적으로 표시되도록 div를 제어합니다 <br /> var i = 0;<br /> 함수change_show(){<br /> var obj = $("팁");<br /> i=i 5; //속도를 점진적으로 표시<br /> obj.style.filter = "Alpha(Opacity=" i ")"; //투명도가 점차 작아집니다<br /> obj.style.opacity = i/100; //FireFox와 호환 가능<br /> if(i>=100){<br> ; 클리어간격(들);<br> 나는=0;<br> }<br> }<br> //div가 점차 사라지도록 제어 <br> var j = 100;<br> 함수change_hidden(){<br> var obj = $("팁");<br> j=j-5; //페이드 어웨이 속도<br> obj.style.filter = "Alpha(Opacity=" j ")"; //투명도가 점차 커집니다<br> obj.style.opacity = j/100; //FireFox와 호환 가능<br> if(j<=0){<br /> ; 클리어간격(h);<br /> //obj.style.display="없음";<br /> j=100;<br /> }<br /> }<br /> //change_show() 동작 제어<br /> vars;<br /> 함수 표시(x){<br /> If(s){clearInterval(s);}<br /> $("tip").style.display="block";<br /> s = setInterval(change_show,1);<br /> }<br /> //change_hidden() 동작 제어<br /> 함수 숨김(x){<br /> $("tip").innerHTML="";<br /> h = setInterval(change_hidden,1);<br /> }<br /> //--><br> <br> </머리><br> <br> <div id="tip" style="Background-color:blue;width:48%;height:48%;" onmouseover="show(this);" onmouseout="hidden(this);"><br> </div><br> <br /><br> <br>여기에 마우스를 올리면 div 레이어에 점차적으로 표시됩니다.<br><hr> 인터넷에서 수집된 항목은 상업적인 용도가 아닌 관심과 학습 교환을 위한 것입니다. <br> </본문><br> </div>