> 웹 프론트엔드 > JS 튜토리얼 > 터치 지원 브라우저에서 길게 터치할 때 호버 효과를 복제하는 방법은 무엇입니까?

터치 지원 브라우저에서 길게 터치할 때 호버 효과를 복제하는 방법은 무엇입니까?

Linda Hamilton
풀어 주다: 2024-10-22 19:04:02
원래의
764명이 탐색했습니다.

How to Replicate Hover Effects for Long Touches in Touch-Enabled Browsers?

터치 제스처로 호버 효과 시뮬레이션

시나리오:

CSS를 사용하여 스타일이 지정된 HTML 요소가 있는 웹페이지가 있습니다. 특히, 커서를 요소 위로 가져가면 색상이 변경되는 "호버" 효과가 있는 요소가 있습니다. 그러나 터치 지원 브라우저에서는 긴 터치에 대해 이 동작을 복제하려고 합니다.

해결책:

이를 달성하려면 다음 단계를 따르세요.

  1. CSS 수정: 호버 효과를 활성화하려는 HTML 요소에 다음 클래스를 추가합니다.
<code class="css">p {
  color:black;
}

p:hover, p.hover_effect {
  color:red;
}</code>
로그인 후 복사

이렇게 하면 "hover_효과"가 보장됩니다. " 클래스는 ":hover" 의사 클래스의 스타일을 복제합니다.

  1. JavaScript 추가: jQuery를 사용하여 다음 코드를 구현합니다.
<code class="javascript">$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});</code>
로그인 후 복사
  1. 기본 브라우저 동작 방지: 브라우저의 기본 터치 동작(예: 상황에 맞는 메뉴)을 방지하려면 스타일 시트에 다음 CSS를 추가하세요.
<code class="css">.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}</code>
로그인 후 복사

이러한 수정 조합을 통해 적합한 요소에서 길게 터치하는 동작을 통해 터치 지원 브라우저에 대한 호버 이벤트를 시뮬레이션할 수 있습니다.

위 내용은 터치 지원 브라우저에서 길게 터치할 때 호버 효과를 복제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿