터치 장치의 버튼에 끈적한 호버 효과를 방지하는 방법은 무엇입니까?

터치 기기에서 CSS를 사용하여 호버 효과를 추가하면 요소가 고정됩니다. 이 기사는 당신에게 가르쳐 줄 것입니다 이 문제를 해결하는 방법을 알려주십시오. 터치 장치에서는 호버 효과가 없으므로 버튼이 원래 상태로 유지됩니다. 아니요 JavaScript 사용: CSS의 미디어 쿼리 기능을 사용하면 이 문제를 해결할 수 있습니다. 지원되는 장치 hover는 "hover: hover" 요구 사항과 일치하는 항목입니다. 다음 CSS가 추가되었는지 확인하려면 이러한 장치에서만 이 조건으로 미디어 쿼리를 사용하십시오. 호버를 지원하는 장치만 터치 장치에는 호버 효과가 표시되지 않습니다. 여기에 마우스를 올리면 호버 효과가 추가된 것을 확인할 수 있습니다. 버튼을 누르면 배경색이 변경됩니다. 여기서 JavaScript는 HTML에서 값을 가져오는 데 사용됩니다.

• 아시다시피 터치스크린 기술은 호버 동작을 지원하지 않습니다. 그러므로, 반응형 웹사이트를 만들 때 언제, 어디서 사용할지 신중하게 고려해야 합니다. : 호버 상호 작용. 일부 터치 스크린 장치에서는 단순 링크의 호버 효과가 사라집니다. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!