자바스크립트/ 12. onmouseover & onmouseout 이벤트

코딩하는 문과생 2018. 11. 4. 17:26

자바스크립트/ 12. onmouseover & onmouseout

마우스가 오버되거나 해당 태그를 벗어날 경우 발생하는 이벤트.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
  <div onmouseover="mOver(this)" onmouseout="mOut(this)" 
    //마우스 오버되면 mOver함수를, 마우스가 div를 벗어나면 mOut을 실행
    style="background-color:#D94A38;width:120px;height:20px;padding:40px;">
    First Display..
 
  </div>
</body>
 
<script>
  function mOver(obj){
    obj.innerHTML = "Thank U";
    //div의 텍스트를 수정
  }
  function mOut(obj){
    obj.innerHTML = "Mouse Over Me."
    //div의 텍스트를 수정
  }
</script>
 
Colored by Color Scripter
cs

<실행결과>

첫화면

오버했을때

빨간색 구역 벗어났을 때