마우스를 안팎으로 움직여 CSS 스타일을 변경하는 작은 예입니다_javascript 기술

웹 페이지의 특정 영역은 마우스를 안으로 이동하면 스타일을 변경하고, 마우스를 밖으로 이동하면 자동으로 스타일을 복원합니다. 이는 그림의 테두리일 수도 있고, 일단 마스터하면 텍스트 부분이 색상을 변경할 수도 있습니다. 원리상으로는 좀 더 풍부하고 생생한 웹페이지 인터랙션 효과를 낼 수 있을 것으로 보이며, 여기서는 Hover 태그가 위치한 DIV를 주로 Js로 제어하여 액션을 생성하는 것도 좋은 예입니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>마우스를 안팎으로 움직여 CSS 스타일을 변경하세요</title> <style> body{color:#fff;font:12px/1.5 Tahoma;} #div1{width:150px;height:150px;margin:0 auto;padding:10px;background:black;border:10px solid #000;cursor:crosshair;} #div1.hover{color:red;background:#f0f0f0;border:10px solid red;} </style> <div id="div1"> </div>스타일을 변경하려면 마우스를 안으로 움직이고 스타일을 복원하려면 마우스를 밖으로 움직이세요.
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다

]<script> window.onload = function () { var oDiv = document.getElementById("div1"); oDiv.onmouseover = function () { oDiv.className = "hover" }; oDiv.onmouseout = function () { oDiv.className = "" } }; </script>