목차
- hover() 예제 - hover 시 배경색 연이어 변경
- hover() 정의
- hover() 구문
- hover() 예제 - hover 시, 경고창 연어어 띄우기
hover() 예제 - hover 시 배경색 연이어 변경
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h1").hover(function(){
$(this).css("background-color", "yellow");
}, function(){
$(this).css("background-color", "pink");
});
});
</script>
<h1>홈짱닷컴 Homzzang.com</h1>
결과보기
hover() 정의
선택된 요소 위로 마우스 커서가 들어올 때와 나갈 때 작동.
※ hover() = mouseenter() + mouseleave()
1.
매개변수에 mouseenter 때 실행함수와 mouseleave 때 실행함수를 쉼표 ( , ) 이용해 연결.
2.
매개변수에 함수 1개만 지정 시, mouseenter 및 mouseleave 이벤트 모두에 대해 실행됨.
hover() 구문
$(selector).hover(inFunction,outFunction)
[매개변수]
inFunction
필수. mouseenter 이벤트 발생 시 실행할 함수 지정
outFunction
선택. mouseleave 이벤트 발생 시 실행할 함수 지정
hover() 예제 - hover 시, 경고창 연어어 띄우기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hz").hover(function(){
alert("Homzzang.com");
}, function(){
alert("잊지마! ^!~");
}
);
});
</script>
<p id="hz">홈짱닷컴 주소 보기</p>
결과보기
