터치 장치에서 호버 스타일을 효과적으로 비활성화하는 방법: 종합 가이드

터치 장치에서 hover 스타일을 비활성화하는 방법: 종합 가이드

문제:
터치 장치가 웹 사이트를 방문할 때 다음이 발생합니다. CSS 스타일은 클릭 또는 탭 시 트리거됩니다. 이는 주의를 산만하게 하거나 심지어 대화형 요소에 액세스하지 못하게 만들 수도 있습니다.

목표:
각 선언의 선택기를 알지 못한 채 터치 장치에 대한 모든 :hover CSS 선언을 제거하거나 무시합니다.

해결책:

JavaScript 제거

JavaScript를 사용하여 :hover가 포함된 모든 CSS 규칙을 제거하세요.

<code class="javascript">if (hasTouch()) {
  for (var si in document.styleSheets) {
    for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
      if (styleSheet.rules[ri].selectorText.match(':hover')) {
        styleSheet.deleteRule(ri);
      }
    }
  }
}</code>

장점:

• 이전 브라우저와 호환되며 CSS 변경이 필요하지 않습니다.
  단점:
• 마우스와 터치가 혼합된 장치에서 마우스 오버를 비활성화하여 UX에 해를 끼칩니다.
• 동일한 도메인에 호스팅된 스타일시트만 제거할 수 있습니다.

미디어 쿼리가 포함된 CSS 전용

:hover 규칙을 포함하려면 @media 블록을 사용하세요.

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

장점:

• CSS로 구현하기 쉽습니다.
  단점:
• 호버 미디어 지원 필요 쿼리(iOS 9.0, Android용 Chrome, Android 5.0).
• 마우스와 터치 기기가 혼합된 경우 일관성이 없습니다.

터치 감지 및 CSS 삽입

터치 이벤트 감지 JavaScript를 사용하고 조건부로 CSS 클래스를 추가합니다.

<code class="js">if (!hasTouch()) document.body.className += ' hasHover'</code>

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

장점:

• 혼합 터치 기기에 대한 미디어 쿼리보다 더 안정적입니다.
  단점:
• 여전히 터치 에뮬레이션 이벤트(예: 터치스크린의 마우스 커서)의 영향을 받습니다.

궁극적인 솔루션: 동적 호버 감지

마우스 커서 및 터치 이벤트를 기반으로 호버 스타일을 활성화 또는 비활성화합니다.

<code class="js">function watchForHover() {
  document.addEventListener('touchstart', updateLastTouchTime, true)
  document.addEventListener('touchstart', disableHover, true)
  document.addEventListener('mousemove', enableHover, true)
}</code>

장점:

• 가장 강력한 솔루션으로 모든 브라우저에서 작동합니다.
• 기기 입력에 동적으로 호버 스타일을 적용합니다.
  단점:
• 에뮬레이트된 마우스 이동 이벤트를 방지하기 위해 터치 이벤트 후 짧은 지연(예: 500ms)이 있습니다.

위 내용은 터치 장치에서 호버 스타일을 효과적으로 비활성화하는 방법: 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!