[attribute] HTML - onmouseover 속성 ★ - 마우스커서가 지정요소 위에 있을 때 실행 (= onmouseover속성 = 온마우스오우버속성) ※ onmouseover이벤트 = 온마우스오우버이벤트 ※ 마우스포인터가 지정요소 위에 위치 시

1. onmouseover 예제 - 마우스커서가 요소 위에 위치 시 실행
2. onmouseover 정의
3. onmouseover 구문

onmouseover 예제 - 마우스커서가 요소 위에 위치 시 실행

 

<img onmouseover="bigSize(this)" onmouseout="basicSize(this)" border="0" src="https://i.imgur.com/YrkG5xB.gif" alt="kiss" width="50" height="50">

<script>

function bigSize(x) {

  x.style.height = "100px";

  x.style.width = "100px";

}

function basicSize(x) {

  x.style.height = "50px";

  x.style.width = "50px";

}

</script>

 

결과보기

onmouseover 정의

 

마우스커서가 지정요소 위에 있을 때 실행할 코드 지정.

 

---

 

1. onmouseover 요소 사용 가능 태그 종류

모든 가시 HTML 요소

 

2. cf.

• onmousemove 속성 - 마우스커서가 요소 안으로 이동 시 실행.
• onmouseout 속성 - 마우스커서가 요소 밖으로 이동 시 실행.

 

3.

모든 브라우저 지원.

 

onmouseover 구문

 

HTML 방식

• <element onmouseover="myScript">

 

JS 방식 (3가지)

• object.onmouseover = ()=>{myScript};
• object.onmouseover = function(){myScript};
• object.addEventListener("mouseover", myScript);

---

[속성값]

 

myScript

마우스커서가 지정요소 위에 있을 때, 실행할 JS 코드

• 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
• 사용 방식 통일 권장.