터치 지원 장치의 버튼에서 고정 호버 효과를 제거하는 방법은 무엇입니까?

터치 지원 장치의 버튼에서 고정 호버 효과를 제거하는 방법

영구 탐색 버튼이 있는 캐러셀을 만들 때 다음에서 일반적인 문제가 발생합니다. 터치 장치. 일반적으로 파란색으로 나타나는 버튼의 호버 상태는 "고정" 상태가 되며 탭한 후에도 계속 활성화됩니다. 이 문제를 해결하기 위한 몇 가지 접근 방식이 모색되었습니다.

• 터치엔드에 마우스 오버 없음 클래스를 추가하면 문제가 해결될 수 있지만 성능에 영향을 미치고 터치와 마우스가 모두 있는 Chromebook과 같은 기기에서 호환성 문제가 발생할 수 있습니다.
• documentElement에 터치 클래스를 구현하고 이에 따라 CSS를 수정하면 문제를 해결할 수도 있지만 터치와 마우스를 모두 지원하는 기기에는 최적이 아닙니다.

이상적인 솔루션 터치엔드 시 호버 상태를 제거하는 것입니다. 그러나 이에 대한 직접적인 방법은 없습니다. 다른 요소에 초점을 맞춰도 호버 상태는 제거되지 않습니다. 다른 요소를 수동으로 탭하는 동안 JavaScript에서 프로그래밍 방식으로 이 작업을 실행하는 것은 여전히 ​​어려운 일입니다.

이 문제를 효과적으로 해결하려면 CSS 미디어 쿼리 레벨 4의 최근 개발을 활용할 수 있습니다.

@media (hover: hover) {
    button:hover {
        background-color: blue;
    }
}

이 CSS에는 기본적으로 "기기가 실제 마우스 오버를 지원하는 경우(예: 마우스와 같은 기본 입력 장치가 있는 경우) 버튼 마우스 오버 스타일을 적용하세요."라고 명시되어 있습니다.

이 기능이 아직 구현되지 않은 브라우저의 경우 JavaScript 폴리필을 활용하면 호버 지원을 감지하고 사용자 정의 클래스를 전환할 수 있으므로 호버 스타일을 조건부로 적용할 수 있습니다.

html.my-true-hover button:hover {
    background-color: blue;
}

$(document).on('mq4hsChange', function (e) {
    $(document.documentElement).toggleClass('my-true-hover', e.trueHover);
});

이 솔루션은 원하는 미학을 유지하면서 터치 장치의 끈끈한 호버 효과를 효과적으로 제거합니다. 마우스 입력이 가능한 기기에서.

위 내용은 터치 지원 장치의 버튼에서 고정 호버 효과를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!