길게 누르기를 사용하여 터치스크린에서 호버 효과를 시뮬레이션하는 방법은 무엇입니까?

길게 누르기를 사용하여 터치 지원 장치에서 호버 효과 트리거

스마트폰 및 태블릿과 같은 터치 지원 장치에서 호버 효과를 복제하려면 를 사용하면 CSS와 JavaScript의 조합을 활용할 수 있습니다. 작동 방식은 다음과 같습니다.

HTML 마크업

호버 효과를 적용하려는 요소에 "hover"라는 클래스를 추가합니다. 예를 들면 다음과 같습니다.

<code class="html"><p class="hover">Some Text</p></code>

CSS 스타일링

hover 및 .hover_효과 클래스 모두에 호버 효과를 포함하도록 CSS를 수정하세요. .hover_효과 클래스는 터치 장치의 호버 효과를 시뮬레이션하는 데 사용됩니다.

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

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

JavaScript

JavaScript를 사용하여 길게 누르기 이벤트를 감지합니다. 다음은 jQuery를 사용한 예입니다.

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

이 JavaScript 코드는 "hover" 클래스가 있는 요소에 터치시작 및 터치엔드 이벤트에 대한 이벤트 핸들러를 추가합니다. 터치가 시작되거나 종료되면 터치된 요소의 hover_효과 클래스가 토글됩니다.

추가 CSS

브라우저가 터치할 때 상황에 맞는 메뉴를 표시하거나 확인을 요청하는 것을 방지하려면 모바일 장치에서 요소를 터치하려면 다음 CSS 규칙을 추가하세요.

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

결과

이러한 요소를 결합하면 이제 터치 지원에서 호버 효과를 시뮬레이션할 수 있습니다. 원하는 요소를 길게 눌러 장치를 사용할 수 있습니다. 이 방법을 사용하면 기존의 마우스 오버 없이 버튼이나 링크와 같은 대화형 요소를 만들 수 있습니다.

위 내용은 길게 누르기를 사용하여 터치스크린에서 호버 효과를 시뮬레이션하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!