tl; dr 이것을 사용하십시오 : https://jsfiddle.net/57tmy8j3/
왜 또는 다른 옵션이 있는지 관심이 있으시면 계속 읽으십시오.
Quick'n'dirty-JS를 사용하여 호버 스타일 제거
:hoverJavascript 를 사용하여 포함 된 모든 CSS 규칙을 제거 할 수 있습니다 . 이것은 CSS를 건드릴 필요가없고 구형 브라우저와도 호환되는 장점이 있습니다.
function hasTouch() {
return 'ontouchstart' in document.documentElement
|| navigator.maxTouchPoints > 0
|| navigator.msMaxTouchPoints > 0;
}
if (hasTouch()) { // remove all the :hover stylesheets
try { // prevent exception on browsers not supporting DOM styleSheets properly
for (var si in document.styleSheets) {
var styleSheet = document.styleSheets[si];
if (!styleSheet.rules) continue;
for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
if (!styleSheet.rules[ri].selectorText) continue;
if (styleSheet.rules[ri].selectorText.match(':hover')) {
styleSheet.deleteRule(ri);
}
}
}
} catch (ex) {}
}
제한 사항 : 스타일 시트는 동일한 도메인 에서 호스팅되어야 합니다 (즉, CDN이 없음). UX를 손상시키는 Surface 또는 iPad Pro와 같은 혼합 마우스 및 터치 장치 에서 호버를 비활성화합니다 .
CSS 전용-미디어 쿼리 사용
모든 : 호버 규칙을 @media블록에 배치하십시오.
@media (hover: hover) {
a:hover { color: blue; }
}
또는 대안으로 모든 호버 규칙을 무시하십시오 (이전 브라우저와 호환 가능).
a:hover { color: blue; }
@media (hover: none) {
a:hover { color: inherit; }
}
제한 사항 : WebView를 사용하는 경우 iOS 9.0 이상, Android 용 Chrome 또는 Android 5.0 이상에서만 작동합니다. hover: hover이전 브라우저에서 마우스 hover: none오버 효과를 중단 하고 이전에 정의 된 모든 CSS 규칙을 재정의해야합니다. 둘 다 혼합 마우스 및 터치 장치와 호환되지 않습니다 .
가장 강력한 기능-JS를 통한 터치 감지 및 CSS 접두사
이 방법은 모든 호버 규칙 앞에로 표시해야합니다 body.hasHover. (또는 선택한 학급 이름)
body.hasHover a:hover { color: blue; }
hasHover클래스를 사용하여 첨가 될 수있다 hasTouch()첫 번째 예에서 :
if (!hasTouch()) document.body.className += ' hasHover'
그러나이 예에서는 이전 예제와 혼합 터치 장치의 단점이 동일하여 궁극적 인 솔루션을 제공합니다. 마우스 커서를 움직일 때마다 호버 효과를 활성화하고 터치가 감지 될 때마다 호버 효과를 비활성화하십시오.
function watchForHover() {
// lastTouchTime is used for ignoring emulated mousemove events
let lastTouchTime = 0
function enableHover() {
if (new Date() - lastTouchTime < 500) return
document.body.classList.add('hasHover')
}
function disableHover() {
document.body.classList.remove('hasHover')
}
function updateLastTouchTime() {
lastTouchTime = new Date()
}
document.addEventListener('touchstart', updateLastTouchTime, true)
document.addEventListener('touchstart', disableHover, true)
document.addEventListener('mousemove', enableHover, true)
enableHover()
}
watchForHover()
이것은 기본적으로 모든 브라우저에서 작동하며 필요에 따라 호버 스타일을 활성화 / 비활성화합니다.
전체 예제는 다음과 같습니다-현대 : https://jsfiddle.net/57tmy8j3/
레거시 (이전 브라우저와 함께 사용) : https://jsfiddle.net/dkz17jc5/19/