mouseover() / mouseout() / hover() 이벤트 메서드
mouseover() : 선택한 요소에 마우스 포인터를 올릴 때 마다 이벤트를 발생시키거나 선택한 요소에 mouseover 이벤트를 강제로 발생
mouseout() : 선택한 요소에 마우스 포인터가 벗어날 때 마다 이벤트를 발생시키거나 선택한 요소에 mouseout 이벤트를 강제로 발생
hover() : 선택한 요소에 마우스 포인터가 올라갈 때와 선택한 요소에서 벗어날 때 각각 이벤트를 발생시키며, 이 때 각각 다른 이벤트 핸들러를 실행
기본형:
1) mouseover 이벤트 등록
$("이벤트 대상 선택").mouseover(function() {
자바 스크립트코드;
});
$(document).on("mouseover", function() {
자바 스크립트 코드;
});
2) mouseover 이벤트 강제 발생
$("이벤트 대상 선택").mouseover()
1) mouseout 이벤트 등록
$("이벤트 대상 선택").mouseout(function() {
자바 스크립트코드;
});
$(document).on("mouseout", function() {
자바 스크립트 코드;
});
2) mouseout 이벤트 강제 발생
$("이벤트 대상 선택").mouseout()
hover 이벤트 등록
$("이벤트 대상 선택").hover(
function() { 마우스 오버 시 실행될 코드;},
function() { 마우스 아웃 시 실행될 코드;}
);
3) hover
hover() : 선택한 요소에 마우스 포인터가 올라갈 때와 선택한 요소에서 벗어날 때 각각 이벤트를 발생시키며, 이 때 각각 다른 이벤트 핸들러를 실행
- hover 이벤트 등록
$("이벤트 대상 선택").hover(
function() { 마우스 오버 시 실행될 코드;},
function() { 마우스 아웃 시 실행될 코드;}
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
$(function() { // 밑에꺼와 같은 기능
$('.btn1').on({
mouseover: function() { // 마우스 포인터가 btn1에 올라가면 txt1 배경컬러가 yellow로 변경
$('.txt1').css({backgroundColor: 'yellow'});
},
mouseout: function() { //마우스 포인터가 btn1에 벗어나면 배경 none
$('.txt1').css({background: 'none'});
}
});
$('.btn2').hover( // 따로 over 와 out 를 지정하지 않아도 각각 이벤트를 발생시킴
function() {
$('.txt2').css({ backgroundColor: 'aqua'}); // 올릴때
},
function() {
$('.txt2').css({ background: 'none'}); // 벗어날때
});
});
</script>
</head>
<body>
<p><button class="btn1">Mouse Over / Mouse Out</button></p>
<p class="txt1">내용1</p>
<p><button class="btn2">Hover</button></p>
<p class="txt2">내용2</p>
</body>
</html>
