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

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

시나리오:

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

해결책:

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

1. CSS 수정: 호버 효과를 활성화하려는 HTML 요소에 다음 클래스를 추가합니다.

<code class="css">p {
  color:black;
}

p:hover, p.hover_effect {
  color:red;
}</code>

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

2. JavaScript 추가: jQuery를 사용하여 다음 코드를 구현합니다.

<code class="javascript">$(document).ready(function() {
    $('.hover').on('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});</code>

3. 기본 브라우저 동작 방지: 브라우저의 기본 터치 동작(예: 상황에 맞는 메뉴)을 방지하려면 스타일 시트에 다음 CSS를 추가하세요.

<code class="css">.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}</code>

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

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