터치 장치 버튼의 고정 호버 효과를 어떻게 방지할 수 있습니까?

터치 장치의 버튼 고정 효과 방지

데스크톱 및 터치 지원 장치 모두에 대한 사용자 인터페이스를 생성할 때 다음 사항을 해결하는 것이 중요합니다. 버튼의 끈적한 호버 효과 문제. 터치 장치에서는 일반적으로 요소의 배경색을 변경하여 표시되는 호버 상태가 버튼을 놓은 후에도 멈출 수 있습니다.

고정 호버 효과를 방지하기 위한 솔루션

이 문제를 해결하기 위해 여러 가지 솔루션이 제안되었습니다.

• 호버 클래스 제거: 이 방법은 간단하지만 비효율적이며 제대로 작동하지 않을 수 있습니다. 터치와 마우스 입력을 모두 지원하는 기기에서.
• 터치 클래스 추가: 이 기술에는 입력 방법이 혼합된 기기를 고려하지 않기 때문에 제한 사항도 있습니다.

선호되는 솔루션

이상적인 솔루션은 터치엔드에서 hover 상태를 제거하는 것입니다. 그러나 이는 다른 요소에 초점을 맞추거나 JavaScript에서 수동 탭을 트리거하는 것과 같은 기존 방법으로는 달성할 수 없는 것 같습니다.

미디어 쿼리 레벨 4 솔루션

그러나 CSS가 널리 구현되면서 2018년부터 미디어 쿼리 레벨 4에서는 더 우아한 솔루션을 사용할 수 있습니다.

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

이 CSS 규칙은 브라우저가 진정한 호버링(일반적으로 마우스와 같은 기본 입력 장치의 사용을 나타냄)을 지원할 때 호버 스타일이 버튼에 적용됩니다. 이는 터치 지원 장치에서 호버 효과를 효과적으로 방지합니다.

레거시 브라우저용 폴리필

CSS 미디어 쿼리 레벨 4를 지원하지 않는 브라우저의 경우 폴리필은 다음과 같습니다. 유사한 솔루션을 구현하는 데 사용됩니다.

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

폴리필의 JavaScript 코드는 호버링 지원을 기반으로 my-true-hover 클래스를 전환할 수 있습니다.

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

이 솔루션을 사용하면 개발자는 버튼이 데스크톱 브라우저에서 적절한 호버 효과를 갖도록 하는 동시에 터치 지원 장치에서는 끈적한 호버 효과를 방지할 수 있습니다.

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