마우스 오버 이벤트를 다루는 간단한 HTML 코드를 제공합니다. 이 코드는 초보자도 이해하기 쉽도록 주석이 추가되어 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>마우스 오버 이벤트</title>
<style>
/* 스타일 변경 */
.box {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>마우스 오버 이벤트</h1>
<!-- 이벤트를 적용할 박스 -->
<div class="box" onmouseover="changeColor(this)" onmouseout="resetColor(this)">마우스를 올려보세요</div>
<script>
// 마우스 오버 시 배경색 변경
function changeColor(element) {
element.style.backgroundColor = "lightgreen";
}
// 마우스 아웃 시 배경색 원래대로
function resetColor(element) {
element.style.backgroundColor = "lightblue";
}
</script>
</body>
</html>
이 코드는 마우스 오버 이벤트에 응답하여 박스의 배경색을 변경하고, 마우스가 박스를 벗어날 때 배경색을 원래대로 되돌리는 간단한 예제입니다.
결과보기
'HTML 예제' 카테고리의 다른 글
| 간단한 슬라이더 만들기 (0) | 2023.12.07 |
|---|---|
| 사용자 입력을 그래프로 표시 (0) | 2023.12.07 |
| 사진 갤러리 만들기 (0) | 2023.12.07 |
| 화면 크기에 따른 반응형 디자인 (0) | 2023.12.07 |
| 간단한 게시판 형식 (0) | 2023.12.07 |
