터치 장치에서 hover CSS 스타일을 효과적으로 비활성화하려면 어떻게 해야 합니까?

터치 기기에서 :hover CSS 스타일 무시

웹사이트를 개발할 때 터치 기기에서 :hover CSS 선언을 제거하거나 무시하는 것이 바람직합니다. 이러한 선언은 어색하고 불필요할 수 있습니다.

빠르고 더러운: JavaScript 사용

한 가지 접근 방식은 JavaScript를 사용하여 :hover가 포함된 모든 스타일 규칙을 제거하는 것입니다. 이 방법은 이전 브라우저와 호환되며 CSS를 수정할 필요가 없습니다.

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (hasTouch()) {
  // Loop through stylesheets and remove :hover rules.
  ...
}</code>

제한 사항:

• 스타일 시트는 동일한 도메인에서 호스팅되어야 합니다.
• 마우스와 터치 장치를 혼합하면 여전히 :hover 이벤트가 실행되어 사용자 경험에 부정적인 영향을 미칠 수 있습니다.

CSS 전용: 미디어 쿼리

또는 미디어 쿼리를 사용하여 특정 장치에 대한 :hover 스타일을 비활성화할 수 있습니다.

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

제한 사항:

• 미디어 쿼리가 필요합니다. 모든 브라우저에서 지원됩니다.
• 마우스와 터치 혼합 장치에서는 작동하지 않습니다.

가장 강력한: JavaScript 감지

가장 신뢰할 수 있는 솔루션인 JavaScript를 사용하여 터치 이벤트를 감지하고 사용자 정의 클래스를 :hover 규칙 앞에 추가합니다.

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

<code class="javascript">function hasTouch() {
  // Check for various touch event APIs.
  ...
}

if (!hasTouch()) {
  document.body.className += ' hasHover';
}</code>

이 방법은 CSS 전용 접근 방식의 한계를 극복하지만 혼합 마우스 및 혼합 마우스에서는 여전히 문제가 있을 수 있습니다. 터치 장치.

이 문제를 해결하려면 마우스 커서 움직임에 따라 호버 효과를 활성화하고 터치 이벤트에서는 비활성화하는 보다 정교한 접근 방식을 구현하십시오.

<code class="javascript">function watchForHover() {
  // Initialize variables for touch detection.
  ...

  // Add or remove the "hasHover" class depending on user actions.
  ...
}

watchForHover();</code>

이 솔루션은 안정적인 감지 및 처리를 제공합니다. 사용자 경험을 손상시키지 않으면서 모든 기기에서 호버 스타일을 사용할 수 있습니다.

위 내용은 터치 장치에서 hover CSS 스타일을 효과적으로 비활성화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!