• 회원가입
  • 로그인

[Event] JQ - hover() 메서드 ★ - hover 이벤트발생/함수실행. (= hover메서드 = 허버 메서드)

목차

  1. hover() 예제 - hover 시 배경색 연이어 변경
  2. hover() 정의
  3. hover() 구문
  4. 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>

결과보기

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012