터치 장치에서 호버 효과를 어떻게 시뮬레이션할 수 있습니까?

터치 장치에서 호버 효과 시뮬레이션

터치 지원 장치가 널리 사용되면서 호버 효과와 같은 기존 마우스 상호 작용을 복제할 수 있습니다. 도전. 이 문제는 마우스 입력에만 적용되므로 CSS만 사용하여 호버 효과를 생성하려고 할 때 발생합니다. 다행히 JavaScript를 통합하고 CSS를 수정하는 방법이 있습니다.

시뮬레이션 구현

길게 터치할 때 호버 효과를 시뮬레이션하려면 다음 단계를 따르세요.

1. 호버 효과를 적용하려는 HTML 요소에 "hover"라는 클래스를 추가합니다.
2. 터치 처리를 활성화하려면 다음 JavaScript 코드를 추가하세요.

$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

3. CSS에서 호버 효과 정의를 수정하여 ".hover_효과" 클래스를 포함하세요. :

element:hover, element.hover_effect {
    rule:properties;
}

4. 선택적으로 다음 CSS를 추가하여 브라우저 선택을 비활성화합니다. touch:

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

설명

이 솔루션은 터치 지원 장치에서 트리거되는 'touchstart' 및 'touchend' 이벤트를 활용합니다. 사용자의 손가락이 화면을 터치하면 'touchstart' 이벤트가 트리거되고 'hover' 클래스가 있는 HTML 요소에 'hover_효과' 클래스가 추가됩니다. 터치가 끝나면 'touchend' 이벤트가 시작되어 'hover_효과' 클래스가 제거되어 호버 효과를 효과적으로 시뮬레이션합니다.

위 내용은 터치 장치에서 호버 효과를 어떻게 시뮬레이션할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!