[attribute] HTML - onmouseout 속성 ★ - 마우스커서가 지정요소 밖으로 이동 시 실행 (= onmouseout속성 = 온마우스아웃속성) ※ onmouseout이벤트 = 온마우스아웃이벤트 ※ 마우스포인터가 지정요소 위에서 벗어날 때

1. onmouseout 예제 - 마우스커서가 요소 밖으로 이동 시 실행
2. onmouseout 정의
3. onmouseout 구문

onmouseout 예제 - 마우스커서가 요소 밖으로 이동 시 실행

 

<img onmousemove="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>

 

결과보기

onmouseout 정의

 

마우스커서가 지정요소 밖으로 이동 시 실행할 코드 지정.

 

---

 

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

모든 가시 HTML 요소

 

2. cf.

• onmousemove 속성 - 마우스커서가 요소 안으로 이동 시 실행.
• onmouseover 속성 - 마우스커서가 요소 위에 위치 시 실행.

 

3.

모든 브라우저 지원.

 

onmouseout 구문

 

HTML 방식

• <element onmouseout="myScript">

 

JS 방식 (3가지)

• object.onmouseout = ()=>{myScript};
• object.onmouseout = function(){myScript};
• object.addEventListener("mouseout", myScript);

---

[속성값]

 

myScript

마우스커서가 지정요소 밖으로 이동 시, 실행할 JS 코드

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