jquery는 li의 마우스 오버를 설정합니다.

jQuery는 HTML 문서와 CSS 스타일을 쉽게 조작할 수 있게 해주는 인기 있는 JavaScript 라이브러리입니다. jQuery를 사용할 때 mouseover(마우스 인) 및 mouseout(마우스 아웃)과 같은 마우스 이벤트를 설정해야 하는 경우가 많습니다. 이 기사에서는 jQuery를 사용하여 li의 마우스 오버 이벤트를 설정하는 방법을 소개합니다.

1. HTML 문서 준비

먼저 아래와 같이 일부 li 요소가 포함된 HTML 문서를 준비해야 합니다.

<ul>
  <li>选项1</li>
  <li>选项2</li>
  <li>选项3</li>
</ul>

2. jQuery 라이브러리 소개

HTML 문서의 다음 코드는 jQuery 라이브러리를 소개합니다.

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

여기에서는 CDN 링크가 사용되어 페이지 로드 속도가 더 빨라질 수 있습니다.

3. jQuery 코드 작성

다음으로 jQuery를 사용하여 li의 마우스 오버 이벤트를 설정합니다. 페이지가 로드된 후 모든 li 요소를 선택하고 mouseover 메서드를 사용하여 이벤트 핸들러를 추가합니다.

<script>
$(document).ready(function(){
  $('li').mouseover(function(){
    $(this).css('background-color', 'yellow');
  });
});
</script>

이 코드는 문서가 로드된 후 모든 li 요소를 선택하고 Set to에서 마우스가 움직일 때 배경색을 변경한다는 의미입니다. 노란색. $(this)는 현재 li 요소를 나타냅니다.

4. 효과 테스트

전체 코드를 HTML 문서에 붙여넣고 브라우저에서 페이지를 엽니다. li 요소 위로 마우스를 이동하면 해당 요소의 배경색이 노란색으로 변경됩니다.

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('li').mouseover(function(){
        $(this).css('background-color', 'yellow');
      });
    });
  </script>


  

    
选项1
    
选项2
    
选项3
  

5. 마우스 아웃 이벤트 추가

마우스 오버 이벤트 외에도 마우스가 요소에서 멀어질 때 트리거되는 이벤트인 마우스 아웃 이벤트를 추가할 수도 있습니다. 위 코드에서는 mouseover 이벤트에 mouseout 이벤트를 추가할 수 있습니다:

<script>
$(document).ready(function(){
  $('li').mouseover(function(){
    $(this).css('background-color', 'yellow');
  }).mouseout(function(){
    $(this).css('background-color', '');
  });
});
</script>

이 코드의 의미는 마우스가 li 요소로 이동할 때 배경색을 노란색으로 설정하고 마우스가 이동할 때 배경색을 공백으로 반환한다는 것입니다. 밖으로 나간다.

6. 전체 코드

최종 완성 코드는 다음과 같습니다.

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      $('li').mouseover(function(){
        $(this).css('background-color', 'yellow');
      }).mouseout(function(){
        $(this).css('background-color', '');
      });
    });
  </script>


  

    
选项1
    
选项2
    
选项3
  

7. Summary

이 글에서는 jQuery를 사용하여 li의 마우스 오버 이벤트 설정, 마우스 이동 시 배경색 변경, 그리고 마우스가 밖으로 움직일 때 배경색을 복원합니다. 이 예제를 통해 jQuery를 사용하여 이벤트 핸들러를 추가하는 방법과 CSS 스타일을 사용하여 요소의 모양을 변경하는 방법을 배울 수 있습니다. 실제 웹사이트 개발에서는 보다 복잡한 대화형 효과를 얻기 위해 필요에 따라 다양한 마우스 이벤트와 스타일 규칙을 사용할 수 있습니다.

위 내용은 jquery는 li의 마우스 오버를 설정합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!