jQuery - 버튼에 호버(hover) 효과 이벤트, 적용하기

2022. 3. 6. 03:34

버튼에 hover 이벤트를 이용하여 마우스로 버튼 위로 가져다 올렸을 때 효과를 적용해보자.

▶ hover 이벤트

hover(handler1, handler2)
→ handler1은 마우스가 지정한 엘리먼트에 가져다 올려졌을 때 실행하는 코드, handler2는 반대로 마우스가 엘리먼트를 벗어나면 실행하는 코드

$('선택자').hover(function(e){
	// 마우스를 지정한 엘리먼트 위로 가져다 올렸을 때 실행코드
	//$('선택자').addClass('hoverEffect');
},function(e){
	// 마우스를 지정한 엘리먼트 밖으로 빠졌을 때 실행코드
	//$('선택자').removeClass('hoverEffect');
});

위 코드의 이벤트를 사용해서 버튼의 호버 효과를 줄 수 있다.

예)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
    .btn{
      box-shadow:inset 0px 1px 0px 0px #dcecfb;
      background:linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
      background-color:#bddbfa;
      border-radius:6px;
      border:1px solid #84bbf3;
      display:inline-block;
      cursor:pointer;
      color:#ffffff;
      font-family:Arial;
      font-size:15px;
      font-weight:bold;
      padding:6px 24px;
      text-decoration:none;
      text-shadow:0px 1px 0px #528ecc;
    }
    
    .hoverEffect {
      background:linear-gradient(to bottom, #80b5ea 5%, #bddbfa 100%);
      background-color:#80b5ea;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
    $(document).ready(function(){
        $('.btn').hover(function(e){
            $('#'+e.target.id).addClass('hoverEffect');
          },function(e){
            $('#'+e.target.id).removeClass('hoverEffect');
          });
    });
  </script>
  <title>JS Bin</title>
</head>
<body>
  <button class="btn" id="btn-1"> 1번 버튼 </button>
  <button class="btn" id="btn-2"> 2번 버튼 </button>
  <button class="btn" id="btn-3"> 3번 버튼 </button>
  <button class="btn" id="btn-4"> 4번 버튼 </button>
</body>
</html>

위 코드를 확인해보면 버튼 4개의 만들어서 각 버튼의 클래스와 아이디를 적용하여

호버(hover) 이벤트를 적용시켰다.

적용했을 땐 addClass라는 클래스 추가 및 삭제 메서드를 사용해고, 동작 설명은 이렇다.

CSS 부분에. btn이라는 기본 버튼 스타일을 정의했고. hoverEffect라는 클래스로 선택자로 호버(hover) 시

적용될 스타일을 정의해놨다.

그리고 jQuery 메서드인 hover 이벤트 부분을 보면 호버 시 적용될 선택자 저 코드에선 $('#'+e.target.id)

이 선택자가 addClass 인 메서드를 통해서 hoverEffect라는 클래스를 추가했고, 추가된 선택자는 호버 효과가

나타난다. 그리고 호버에서 벗어나면 removeClass를 통해서 hoverEffect 클래스가 삭제되면서 버튼은

기존 스타일로 돌아가게 된다.

저작자표시 비영리 변경금지

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - 키보드 키 어떤 키가 눌렸는지 확인하는 방법 (0)	2022.03.06
jQuery - 정의한 CSS 클래스 토글 이벤트 (0)	2022.03.06
jQuery - 엘리먼트가 focus(포커스)를 얻고 잃을 때 이벤트 (0)	2022.03.06
jQuery - 마우스 이벤트 관련, 왼쪽/오른쪽 클릭 된 곳 알아내기 (0)	2022.03.05
jQuery - 버튼을 한 번 누른 후 비활성으로 변경하는 방법 (0)	2022.03.05

열공의 기록