코딩하는 문과생

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

웹 프로그래밍/Javascript

자바스크립트/ 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>
 
cs



<실행결과>

첫화면

오버했을때

빨간색 구역 벗어났을 때


'웹 프로그래밍 > Javascript' 카테고리의 다른 글

자바스크립트/ 14. 애니메이션 효과  (0) 2018.11.07
자바스크립트/13. 천천히 목록 없애기  (0) 2018.11.07
자바스크립트/ 11. 값 받기(forms[])  (0) 2018.11.04
자바스크립트/ 10. querySelectorAll  (0) 2018.11.04
자바스크립트/ 09. location 객체와 history 객체  (0) 2018.11.04
'웹 프로그래밍/Javascript' Related Articles more