터치 장치의 버튼에 끈적한 호버 효과를 방지하는 방법은 무엇입니까?
- WBOY앞으로
- 2023-08-22 12:25:06851검색
아시다시피 터치스크린 기술은 호버 동작을 지원하지 않습니다. 그러므로, 반응형 웹사이트를 만들 때 언제, 어디서 사용할지 신중하게 고려해야 합니다. : 호버 상호 작용. 일부 터치 스크린 장치에서는 단순 링크의 호버 효과가 사라집니다. URL을 엽니다. 페이지가 변경되기 전에 잠시 동안 :hover 스타일이 표시됩니다. iOS에서는 클릭 이벤트 전에 :hover가 활성화되기 때문에
사이트 기능에 영향을 주지 않는 사소한 문제입니다. 여기에 a:hover가 있습니다. 다른 요소를 표시하거나 숨기려면 표시 또는 가시성 CSS 속성을 사용하세요. 예 진짜 문제.
이 문제를 해결하는 데 사용할 수 있는 두 가지 방법이 있습니다.
JavaScript가 없는 장치 - CSS 미디어 쿼리 기능을 사용하여 문제를 해결할 수 있습니다. 이 기능을 지원하는 장치 hover는 "hover: hover" 조건으로 참조됩니다. 해당 장치에만 다음 CSS를 추가하세요. 이 조건과 함께 미디어 쿼리를 사용하는 것이 보장됩니다.
코드 조각
으아악예제 1
의 중국어 번역은 다음과 같습니다.예제 1
호버를 지원하는 장치에만 호버 효과가 추가됩니다. 터치 장치에는 호버 효과가 없습니다. 존재하다 이 경우 마우스를 버튼 위로 가져가면 버튼의 배경색이 변경됩니다. 터치 장치에는 다음이 있습니다. 호버 효과가 없으므로 버튼이 원래 상태로 유지됩니다.
으아악위 코드는 다음과 같은 출력을 생성합니다. 이는 비터치 스크린에서의 결과입니다.
JavaScript를 사용한 두 번째 단계 - 이 방법에서는 다음 JavaScript 함수를 사용하여 확인합니다. 터치 장치를 사용하는지 여부. 사용자가 요소를 터치할 때마다 ontouchstart 이벤트 응답은 참값을 반환합니다. 최대 연속 터치 포인트 수 장치가 지원하는 값은 navigator.maxTouchPoints에 의해 반환됩니다.
이 장치에서 지원하는 기능은 navigator.maxTouchPoints에 의해 반환됩니다.navigator.msMaxTouchPoints에서는 공급업체 접두사 "ms"에서 동일한 기능을 사용할 수 있습니다. IE 10 및 이전 브라우저를 대상으로 합니다. 따라서 장치가 터치 기능을 지원하는 경우 지정된 함수는 true를 반환합니다.
코드 조각
으아악예 2
는 다음과 같이 번역됩니다.예 2
이 예에서는 터치 기능이 활성화되지 않은 경우 버튼에 클래스를 추가하는 방법을 살펴보겠습니다. 아래와 같이:아래 코드에서 이 클래스는 CSS의 버튼에 호버 효과를 제공합니다 −
으아악위 코드는 다음과 같은 출력을 생성합니다. 이는 비터치 장치에서의 결과입니다.
터치 기기에는 호버 효과가 없으므로 버튼은 원래 상태로 유지됩니다.
위 내용은 터치 장치의 버튼에 끈적한 호버 효과를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!