[jQuery] 제이쿼리 hover 마우스 오버 이벤트 사용법
- 웹/JQuery
- 2020. 6. 4.
jquery hover 마우스 오버 사용법
hover()
요소 또는 객체에 마우스가 포인터가 올라왔을때,
그리고 마우스 포인터가 요소를 떠날때 이벤트를 설정할 수 있습니다.
사용법
.hover( handlerIn(eventObject), handlerOut(eventObject) )
체험해보기
↓↓↓아래 마우스를 올려보세요.
여기에 마우스를 올려주세요.
<span id="testSpan">마우스를 올려주세요.</span>
-> span에 아이디를 지정하여 span에 있는 텍스트를 hover 이벤트로 컨트롤 해볼게요.
$('#testSpan').hover(function() {
//이부분은 마우스가 올라 요소 위에 올라왔을때 이벤트입니다.
$("#testSpan").text("Hover 적용");
}, function(){
//이부분은 마우스가 요소에서 나갈떄 실행할 수 있는 이벤트 입니다.
$("#testSpan").text("마우스를 올려주세요.");
});
예제소스
<body>
<span id="testSpan">마우스를 올려주세요.</span>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#testSpan').hover(function() {
$("#testSpan").text("Hover 적용");
}, function(){
$("#testSpan").text("마우스를 올려주세요.");
});
});
</script>
요소나 객체에 마우스가 올라왔을 때에 이벤트를 주는 hover에 대해 알아보았습니다.
'웹 > JQuery' 카테고리의 다른 글
| [자바스크립트] JSON 데이터 추가, 삭제 하는 방법 (0) | 2020.06.30 |
|---|---|
| [jQuery] 제이쿼리 undefined, null 체크하기 및 차이점 (0) | 2020.06.09 |
| [jQuery] input 입력창에 숫자만 입력 하기(예제소스, 천단위콤마) (1) | 2020.05.29 |
| [jQuery] 제이쿼리 위젯 datepicker 간단사용법 (0) | 2020.05.11 |
| [jQuery] 제이쿼리 셀렉트박스(selectbox)값 가져오기 해결 (0) | 2020.05.06 |