터치스크린 장치에서 원치 않는 호버 효과를 어떻게 방지할 수 있습니까?

터치스크린 기기에서 :hover 문제 해결

문제: :hover CSS 스타일이 터치 기기에서 의도치 않게 실행되어 원치 않는 효과가 발생합니다.

해결책: 터치스크린 플랫폼에서 :hover 선언을 비활성화하거나 무시하는 포괄적인 전략을 구현합니다.

빠르고 더러운: JavaScript 제거

실용적인 접근 방식의 경우, JavaScript를 활용하여 모든 :hover 스타일을 제거할 수 있습니다. 스타일시트는 동일한 도메인에서 호스팅되어야 하며 터치/마우스 혼합 장치에서 UX를 방해할 수 있습니다.

<code class="js">function hasTouch() {
  // Check for touch capabilities
}

if (hasTouch()) {
  // Remove :hover stylesheets
}</code>

CSS 기반 솔루션

미디어 쿼리:

<code class="css">@media (hover: none) {
  a:hover {
    color: inherit;
  }
}</code>

그러나 이 솔루션은 iOS 9.0 또는 Android 5.0 기기에서만 작동합니다.

조건부 규칙:

<code class="css">body.hasHover a:hover {
  color: blue;
}</code>

앞에 추가가 필요합니다. all :hover 규칙은 터치스크린 감지에 따라 추가되거나 제거되는 클래스(예: hasHover)를 포함합니다.

최적의 감지: JavaScript 및 CSS

가장 강력한 솔루션은 JavaScript 터치 감지와 CSS를 결합합니다. 조건부 규칙.

<code class="js">function watchForHover() {
  // Detect touch and toggle hasHover class
}</code>

<code class="css">body.hasHover a:hover {
  color: blue;
}</code>

이 방법은 마우스가 감지되면 호버 효과를 활성화하고 터치하면 비활성화합니다.

구현 권장 사항

최신 브라우저의 경우 클래스를 사용하여 JavaScript와 CSS 조건부 규칙을 조합하는 것이 좋습니다. 레거시 브라우저의 경우 JavaScript 기반 :hover 스타일 제거가 실행 가능한 옵션입니다.

추가 리소스:

• [GitHub 예](https:// jsfiddle.net/57tmy8j3/)

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