터치 지원 장치에서 원하지 않는 :hover CSS를 어떻게 제거할 수 있습니까?

터치 지원 기기에서 :hover CSS 제거

사용자가 터치 기기를 통해 웹사이트에 액세스하는 경우 :hover CSS 선언이 바람직하지 않게 될 수 있습니다. 터치 입력에 효과적으로 반응하지 않습니다. 사용자는 방해가 될 수 있는 마우스 오버 효과를 경험할 수 있습니다. 이 문제를 해결하기 위해 터치 장치에서 :hover 스타일을 제거하거나 무시하는 여러 가지 방법을 사용할 수 있습니다.

JavaScript 제거

한 가지 접근 방식은 JavaScript를 사용하여 모든 CSS 규칙을 제거하는 것입니다. :hover를 포함합니다. 이 방법은 이전 브라우저와 호환되며 CSS 수정이 필요하지 않습니다. 기기가 터치 입력을 지원하는지 확인하고 스타일 규칙을 반복함으로써 JavaScript는 모든 :hover 선언을 제거할 수 있습니다.

CSS 전용 미디어 쿼리

또 다른 옵션은 @를 활용합니다. 장치가 호버를 지원할 때만 :hover 규칙의 적용을 제한하는 미디어 쿼리입니다. 그러나 이 방법은 iOS 9.0 및 Android용 Chrome 또는 WebView용 Android 5.0으로 제한됩니다. 또한 혼합 마우스 및 터치 장치에서 호버 효과가 깨질 수 있습니다.

JS 감지 및 CSS 앞에 추가

강력한 솔루션에는 JavaScript를 사용하여 터치 입력을 감지하고 다음을 모두 앞에 추가하는 것이 포함됩니다. 사용자 정의 본문 클래스(예: .hasHover)가 있는 호버 규칙. 이 클래스를 조건부로 적용하면 마우스를 지원하는 기기에서만 호버 효과가 활성화됩니다.

마우스 모션과 터치 감지의 결합

마우스 모션을 결합하는 가장 포괄적인 방법입니다. 감지 및 터치 감지. 마우스 움직임이 감지되면 호버 효과가 활성화되고, 터치 입력이 인식되면 비활성화됩니다. 이 접근 방식은 터치 및 마우스 지원 장치 모두에서 원활한 환경을 제공합니다.

실제 구현

실제 구현에는 JavaScript 이벤트 리스너 및 신체 클래스 조작이 포함됩니다. hasHover 클래스는 터치 입력 및 마우스 이동 이벤트에 따라 동적으로 추가되거나 제거됩니다.

최신 브라우저의 경우 실제 예제는 https://jsfiddle.net/57tmy8j3/에서 찾을 수 있습니다. 이전 브라우저와 호환되는 레거시 버전은 https://jsfiddle.net/dkz17jc5/19/에서 사용할 수 있습니다.

위 내용은 터치 지원 장치에서 원하지 않는 :hover CSS를 어떻게 제거할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!