[attribute] HTML - onmousemove 속성 ★ - 마우스커서가 지정요소 안으로 이동 시 실행 (= onmousemove속성 = 온마우스무브속성) ※ onmousemove이벤트 = 온마우스무브이벤트 ※ 마우스포인터가 지정요소 위로 움직일 때

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

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

 

<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>

 

결과보기

onmousemove 정의

 

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

 

---

 

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

모든 가시 HTML 요소

 

2. cf.

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

 

3.

모든 브라우저 지원.

 

onmousemove 구문

 

HTML 방식

• <element onmousemove="myScript">

 

JS 방식 (3가지)

• object.onmousemove = ()=>{myScript};
• object.onmousemove = function(){myScript};
• object.addEventListener("mousemove", myScript);

---

[속성값]

 

myScript

마우스커서가 지정요소 안(=위)로 이동 시, 실행할 JS 코드

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