마우스 오버 효과는 웹 페이지에 인터랙티브한 요소를 추가하는 데 유용한 기능입니다. 이번 글에서는 jQuery를 사용하여 간단한 마우스 오버 효과를 구현하는 방법에 대해 알아보겠습니다.

1. HTML 준비하기

먼저 효과를 적용할 HTML 요소를 준비해야 합니다. 예를 들어, 마우스가 올라갔을 때 변화를 줄 이미지 요소가 있다고 가정해봅시다. 아래와 같이 HTML 코드를 작성합니다.

<div class="image-container">
  <img src="image.jpg" alt="My Image">
</div>

2. CSS 스타일링하기

다음으로, CSS를 사용하여 효과를 주기 위한 스타일을 지정합니다. 마우스 오버 시 이미지 크기가 변경되고 투명도가 조정되도록 스타일을 설정해보겠습니다.

.image-container {
  width: 300px;
  height: 300px;
}

.image-container:hover img {
  transform: scale(1.1);
  opacity: 0.7;
}

위 코드에서는 .image-container 클래스에 원하는 크기를 지정하고, :hover 가상 클래스를 사용하여 마우스 오버 시에만 스타일을 적용하도록 설정합니다.

3. jQuery 코드 추가하기

이제 jQuery를 사용하여 마우스 오버 효과를 구현하는 코드를 추가합니다. 아래와 같이 <script> 태그 내에 코드를 작성합니다.

$(document).ready(function() {
  $('.image-container').hover(
    function() {
      $(this).find('img').animate({opacity: 0.7}, 'fast');
    },
    function() {
      $(this).find('img').animate({opacity: 1}, 'fast');
    }
  );
});

위 코드에서는 .image-container 클래스를 가진 요소에 hover 이벤트를 연결하고, mouseenter 시에는 이미지의 투명도를 0.7로 애니메이션으로 변경하고, mouseleave 시에는 다시 1로 애니메이션으로 변경합니다.

4. 결과 확인하기

모든 코드를 준비한 후, 마우스 오버 효과를 확인해보기 위해 웹 페이지를 열어봅니다. 마우스를 이미지 위로 올리면 이미지 크기가 조정되고 투명도가 변하는 모습을 확인할 수 있을 것입니다.

위의 코드는 단순한 예제일 뿐이며, 실제 프로젝트에 적용할 때는 필요에 따라 코드를 변경하고 확장해야 할 수도 있습니다.

참고 문서:

• jQuery Documentation
• CSS :hover
• jQuery .hover()