마우스가 객체(버튼)에 올라왔을때, 벗어났을때 이벤트 처리를 하는 방법을 확인했다.
bind 대신 mouseover, mouseout을 바로써도 상관없다.
<script>
...
// mouseover
// 마우스가 객체(버튼)에 올라왔을때 이벤트 처리
$("#btn_id").bind("mouseover", function(){
$("#div_id").text("안녕");
});
// 둘중에 하나만 사용함.
$("#btn_id").mouseover(function(){
$("#div_id").text("안녕");
});
// mouseout
// 마우스가 객체(버튼)를 벗어났을때 이벤트 처리
$("#btn_id").bind("mouseout", function(){
$("#div_id").text("");
});
// 둘중에 하나만 사용함.
$("#btn_id").mouseout(function(){
$("#div_id").text("안녕");
});
...
</script>
<body>
...
<!-- 마우스 이벤트가 발생할 버튼 -->
<button id="btn_id">버튼</button>
<!-- 마우스 이벤트가 보여질 div 영역 -->
<div id="div_id"></div>
...
</body>
출처>
jQuery 문서
mouseover
https://api.jquery.com/mouseover/
mouseout
728x90
'Software > Javascript&jQuery' 카테고리의 다른 글
| [jQuery] toggle() 사용해서 특정 영역 숨기기, 보이기 (0) | 2020.05.24 |
|---|---|
| [jQuery] prop(), attr() 사용해서 - 버튼(button) 비활성화(사용안하기) disabled() 처리하기 (0) | 2020.05.22 |
| [Javascript&jQuery] 자바스크립트 - 새로고침 location.reload() (0) | 2020.04.29 |
| [Javascrip&jQuery] .indexOf() 데이터 검색 - WHERE 절의 like 처럼 (0) | 2020.04.22 |
| [Javascrip&jQuery] 버튼(button) 또는 객체(Object)의 .show() .hide() 판정하기 - .toggle() 아님 (0) | 2020.04.21 |