자바스크립트 공부 노트(2) 마우스 오버 시 div 블록의 배경색을 변경하는 코드_기초지식

코드의 HTML 부분:

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

< ;li>마우스가 지나갈 때 배경색 변경

마우스가 지나갈 때 배경색 변경

마우스가 지나갈 때 배경색🎜>

마우스가 지나갈 때 배경색 변경

자바스크립트 부분 코드 중:

마우스가 지나갈 때 li class="current" 클래스를 추가하고, 마우스가 떠날 때 이 클래스를 제거하여 배경색 변경 목적을 달성합니다

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

window.onload = function() {

var lis = document.getElementsByTagName(" li");
for (var i=0; ilis[i].onmouseover = function() {
this.setAttribute("class", "current ");
}
lis[i].onmouseout = function() {
this.setAttribute("class", "");
}
}
}


Css 부분 코드:

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

ul li.current {

background-color:red;
cursor:pointer;
}


위 코드는 주로 모든 사람이 js에 대해 더 많이 알 수 있도록 하기 위한 것입니다. CSS로 구현된 버전은 아래에 제공됩니다.

<style type="text/css"> ul li:hover { background-color:red; cursor:pointer; } </style>마우스가 지나갈 때 배경색 변경<ul> <li>마우스가 지나갈 때 배경색 변경</li> <li>마우스가 지나갈 때 배경색 변경</li> <li>마우스가 지나갈 때 배경색 변경</li> <li> </li> </ul>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 ]