모바일 장치에서 호버 애니메이션을 터치/클릭으로 바꾸려면 어떻게 해야 합니까?

모바일 기기에서 :hover를 터치/클릭으로 교체

:hover에 의해 트리거되는 CSS 애니메이션이 있는 상황에서 챌린지는 호버링이 지원되지 않는 모바일 장치에서 페이지에 액세스할 때 발생합니다. 이 문제를 해결하려면 미디어 쿼리를 사용하여 원하는 동작을 유지하면서 :hover에서 터치 시 또는 클릭 시 이벤트로 전환할 수 있습니다.

특정한 경우 CSS는 현재 :hover에서 애니메이션을 트리거합니다. 이 기능을 모바일 장치로 확장하려면 .info-slide 클래스 내에서 :hover와 함께 :active 선택기를 추가하여 코드에서 :hover 뒤에 :active 선택기가 나타나도록 할 수 있습니다.

.info-slide:hover, .info-slide:active {
    height: 300px;
}

이러한 선택기를 활용하면 원하는 동작을 달성할 수 있습니다. 즉, 데스크톱 장치의 경우 hover와 모바일 장치의 터치/클릭 시 애니메이션이 트리거됩니다. 이 솔루션의 효율성을 테스트하려면 모바일 환경에서 제공된 JSFiddle에 액세스할 수 있습니다.

위 내용은 모바일 장치에서 호버 애니메이션을 터치/클릭으로 바꾸려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!