터치 장치의 버튼에서 고정된 호버 효과를 어떻게 제거할 수 있습니까?

터치 장치의 버튼에 대한 고정 호버 효과 방지

터치 장치의 버튼에 지속적인 호버 상태가 있으면 문제가 될 수 있습니다. 이를 해결하기 위해 다양한 솔루션이 제안됐지만 완전히 만족스러운 솔루션은 없는 것 같습니다. 한 가지 접근 방식은 터치 엔드에 "no-hover" 클래스를 추가하는 것이지만 이는 성능에 부정적인 영향을 미치며 하이브리드 장치를 고려하지 않습니다. 또 다른 옵션은 문서에 "터치" 클래스를 추가하는 것이지만 터치와 마우스 기능이 모두 있는 기기에서는 이 방법도 실패합니다.

이상적인 솔루션: CSS 미디어 쿼리 레벨 4

CSS 미디어 쿼리 레벨 4의 출현으로 더욱 세련된 솔루션이 등장했습니다.

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

이 미디어 쿼리는 특히 실제/에뮬레이트되지 않은 호버 지원 기능이 있는 브라우저(예: 마우스가 있는 장치)를 대상으로 합니다. -입력 메커니즘과 유사). 이러한 브라우저의 버튼은 파란색 호버 효과를 표시합니다.

레거시 브라우저용 폴리필

이 기능이 없는 브라우저의 경우 진정한 호버 지원을 시뮬레이션할 수 있는 JavaScript 폴리필이 있습니다.

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

폴리필은 호버링 기능을 감지하고 그에 따라 "my-true-hover" 클래스를 전환합니다.

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

이 CSS와 JavaScript의 조합은 호버 효과가 두 가지 모두에서 완벽하게 작동하도록 보장합니다. 최신 및 레거시 터치 장치.

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