hover() 메소드
- 선택한 요소에 마우스 포인터가 올라갔을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 효과 적용하는 함수
- 첫 번째 매개변수 : 마우스 올렸을 때 실행되는 함수
- 두 번째 매개변수 : 마우스 땠을 때 실행되는 함수
$(this).hover(
function() { // 마우스 올렸을 때 실행되는 함수},
function() { // 마우스 뗐을 때 실행되는 함수}
);
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery </title>
<style>
#menuBox div {
float:left;
background-color:green;
width:100px;
height:50px;
}
</style>
<script src="jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $menuItem = $('.menuItem'); // 총 4개
// alert($menuItem.length); // 길이 확인
// index 값 출력할 <span> 태그 선택
var $indexSpan = $('#indexSpan');
// 4개 div에 대해서
// 각 div 객체에 대해 메소드 수향 : each() 메소드 사용
// each() 메소드에는 기본적으로 index 의미의 매개변수 포함되어 있음
$menuItem.each(function(index) {
$(this).hover( // 매개변수 : 마우스 올렸을 때 호출할 작업, 마우스 땠을 때 호출할 작업
function() {
$(this).css('background', 'yellow');
$indexSpan.text(index);
},
function() {
$(this).css('background', 'green');
$indexSpan.text("");
}
) // hover() 종료
}); // each() 종료
});
</script>
</head>
<body>
<div id="wrap">
<h2>인덱스 : <span id="indexSpan">index</span></h2>
<div id="menuBox">
<div class="menuItem"></div>
<div class="menuItem"></div>
<div class="menuItem"></div>
<div class="menuItem"></div>
</div>
</div>
</body>
</html>'Frontend > JQuery' 카테고리의 다른 글
| each() 메소드 사용 방법 (0) | 2021.12.15 |
|---|---|
| jQuery 이벤트 (0) | 2021.12.14 |
| jQuery 변수 (0) | 2021.12.14 |
| jQuery 선택자 (selector) (0) | 2021.12.13 |
| jQuery 기본 개념 및 작업 환경 구축 (0) | 2021.12.13 |