HTML에서 onmouseover 속성은 마우스 포인터가 특정 요소 위로 이동하는 순간 지정된 스크립트를 실행합니다. 제목, 버튼, 이미지 등 다양한 HTML 요소에 적용할 수 있으며, 마우스가 올라가는 순간 색상 변경, 알림 표시 등 원하는 동작을 수행하도록 설정할 수 있습니다.
기본 문법
onmouseover 속성은 아래와 같은 형식으로 사용합니다.
<요소 onmouseover = "실행할 스크립트">
예제
다음 코드를 실행하면 onmouseover 속성의 동작을 직접 확인할 수 있습니다. 아래 예제에서는 마우스 커서를 제목(h3 요소) 위에 올리면 글자 색상이 빨간색으로 변경됩니다.
<!DOCTYPE html>
<html>
<body>
<h3 id = "myid" onmouseover = "display()">
This is demo heading.
</h3>
<p>Keep the mouse cursor on the heading to change the color.</p>
<script>
function display() {
document.getElementById("myid").style.color = "red";
}
</script>
</body>
</html>코드 설명
- h3 요소에
onmouseover = "display()"를 추가하여, 마우스 포인터가 제목 위로 이동하면 display() 함수가 호출되도록 설정했습니다. - display() 함수는
document.getElementById()로 해당 요소를 찾은 뒤,style.color속성을 "red"로 변경하여 글자 색상을 바꿉니다.
함께 알아두면 좋은 이벤트
onmouseover와 비슷한 역할을 하는 이벤트로 onmouseenter가 있습니다. onmouseover는 자식 요소 위로 포인터가 이동할 때마다 발생하지만, onmouseenter는 요소에 처음 진입할 때 한 번만 발생한다는 차이가 있습니다. 또한 마우스가 요소를 벗어날 때 동작을 처리하고 싶다면 onmouseout 속성을 함께 사용하면 됩니다. 이러한 마우스 이벤트들을 조합하면 더욱 풍부한 인터랙티브 웹 페이지를 만들 수 있습니다.