Jquery에서 hover를 작성하는 방법

hover는 jquery에서 일반적으로 사용되는 대화형 효과로, 마우스를 가리키거나 떠날 때 해당 이벤트를 트리거할 수 있습니다. Jquery에서 hover를 작성하는 방법은 다음과 같습니다.

1. 단일 요소에 마우스 오버 사용

jquery의 hover() 메서드를 사용하여 마우스 오버에 대한 핸들러를 추가하고 단일 요소에 대한 이벤트를 남길 수 있습니다.

$("element").hover(
    function(){
        $(this).addClass("hover");//添加hover类名
    },
    function(){
        $(this).removeClass("hover");//移除hover类名
    }
);

위 코드에서는 먼저 요소를 선택한 다음 hover() 메서드를 사용하여 이벤트 핸들러를 추가합니다. 마우스가 요소 안으로 이동하면 요소에 호버 클래스 이름을 추가하는 첫 번째 함수가 실행됩니다. 마우스가 요소 밖으로 이동하면 요소에서 호버 클래스 이름을 제거하는 두 번째 함수가 실행됩니다. .

2. 여러 요소에 호버 사용

여러 요소에 호버 효과를 구현해야 하는 경우 각 요소를 순회한 다음 hover() 메서드를 호출하여 이를 달성할 수 있습니다.

$(".elements").each(function(){
    $(this).hover(
        function(){
            $(this).addClass("hover");//添加hover类名
        },
        function(){
            $(this).removeClass("hover");//移除hover类名
        }
    );
});

위 코드에서는 먼저 모든 요소를 ​​선택한 다음 Each() 메서드를 사용하여 각 요소를 순회한 다음 hover() 메서드를 호출하여 이벤트 핸들러를 추가합니다.

3. hover abbreviation method

jquery는 hover 효과를 단축하는 편리한 방법을 제공합니다. mouseenter() 메소드를 사용하여 hover() 메소드의 첫 번째 매개변수를 대체할 수 있습니다. 마찬가지로 mouseleave() 메소드를 사용하여 hover() 메소드의 두 번째 매개변수를 대체할 수 있습니다.

$("element").mouseenter(function(){
    $(this).addClass("hover");//添加hover类名
}).mouseleave(function(){
    $(this).removeClass("hover");//移除hover类名
});

위 코드에서는 mouseenter() 메서드를 사용하여 마우스 이동 이벤트 핸들러를 추가하고, mouseleave() 메서드를 사용하여 마우스 이동 이벤트 핸들러를 추가하고, 체인 호출을 사용하여 코드를 단순화했습니다.

요약

hover는 jquery에서 일반적으로 사용되는 대화형 효과로, 마우스를 가리키거나 떠날 때 해당 이벤트를 트리거할 수 있습니다. jQuery는 단일 요소 또는 여러 요소에 호버 효과를 쉽게 추가할 수 있는 hover() 메서드와 약어 메서드를 제공합니다. 호버를 사용할 때 성능 향상을 위해 이벤트가 여러 번 트리거되지 않도록 주의해야 합니다.

위 내용은 Jquery에서 hover를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!