JQuery를 사용하여 마우스 움직임으로 요소를 숨기는 방법

JQuery는 일반적인 JS 작업을 단순화하기 위해 다양한 기능과 메서드를 제공하는 매우 인기 있는 JavaScript 라이브러리입니다. JQuery에서 요소를 숨기는 것은 매우 일반적인 작업 중 하나입니다. JQuery 마우스를 사용하여 숨겨진 요소를 이동하는 방법은 다음과 같습니다.

JQuery는 HTML 요소를 숨길 수 있는 매우 유용한 "hide()" 메소드를 제공합니다. 여러 요소를 숨기려면 동일한 클래스를 사용하여 요소를 선택한 다음 hide() 메서드를 호출하여 숨길 수 있습니다.

예는 다음과 같습니다.

HTML 코드:

     <div class="box"><p>这是一个段落。</p></div>
     <div class="box"><p>这是另一个段落。</p></div>

CSS 코드:

.box{
    padding:10px;
    background-color:#f1f1f1;
}

JS 코드:

$('.box').hide();

위 코드에서는 JQuery를 사용하여 "box" 클래스가 있는 모든 요소를 ​​선택하고 .hide()를 호출합니다. 숨기는 방법입니다. 지금 브라우저에서 페이지를 보면 "box" 클래스가 있는 모든 요소가 숨겨져 있으므로 아무것도 표시되지 않습니다.

그러나 여기에는 문제가 있습니다. 어떻게 다시 표시할 수 있을까요? .show() 메서드를 사용하여 요소를 복원할 수 있습니다. 그러나 여기서는 마우스 움직임을 사용하여 요소 숨기기 및 표시를 제어하는 ​​더 간단한 방법을 사용합니다.

예는 다음과 같습니다.

HTML 코드:

     <div class="box"><p>这是一个段落。</p></div>
     <div class="box"><p>这是另一个段落。</p></div>

CSS 코드:

.box{
    padding:10px;
    background-color:#f1f1f1;
}

JS 코드:

$('.box').mouseover(function(){
    $(this).hide();
}).mouseout(function(){
    $(this).show();
});

위 코드에서는 JQuery를 사용하여 "box" 클래스가 있는 모든 요소를 ​​선택하고 마우스 이동 이벤트를 등록합니다. (마우스 오버). 마우스를 요소 위로 이동하면 hide() 메서드가 호출되어 요소를 숨깁니다. 마우스가 멀어지면 show() 메서드가 호출되어 요소를 표시합니다.

지금 브라우저에서 이 페이지를 보면 모든 요소가 표시됩니다. 그러나 요소 위로 마우스를 이동하면 해당 요소가 숨겨집니다. 마우스가 멀어지면 다시 나타납니다.

위는 JQuery 마우스를 사용하여 숨겨진 요소를 이동하는 방법입니다. 이 기술은 메뉴, 탭 등과 같은 다양한 웹 애플리케이션에서 사용할 수 있습니다.

위 내용은 JQuery를 사용하여 마우스 움직임으로 요소를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!