tl; dr bunu kullanın: https://jsfiddle.net/57tmy8j3/
Neden veya başka hangi seçeneklerin olduğunu merak ediyorsanız, okumaya devam edin.
Quick'n'dirty - kaldır: JS kullanarak stilleri üzerine getirin
:hoverJavascript kullanarak içeren tüm CSS kurallarını kaldırabilirsiniz . Bu, CSS'ye dokunmak zorunda kalmama ve eski tarayıcılarla bile uyumlu olma avantajına sahiptir.
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) {}
}
Sınırlamalar: stil sayfaları aynı etki alanında barındırılmalıdır (bu, CDN olmadığı anlamına gelir). UX'e zarar veren Surface veya iPad Pro gibi karışık fare ve dokunmatik cihazlardaki fareyle üzerine gelmeyi devre dışı bırakır .
Yalnızca CSS - medya sorgularını kullanma
Tüm hover kurallarınızı bir @mediabloğa yerleştirin:
@media (hover: hover) {
a:hover { color: blue; }
}
veya alternatif olarak, tüm fareyle üzerine gelme kurallarınızı geçersiz kılın (eski tarayıcılarla uyumlu):
a:hover { color: blue; }
@media (hover: none) {
a:hover { color: inherit; }
}
Sınırlamalar: WebView kullanılırken yalnızca iOS 9.0+, Android için Chrome veya Android 5.0+ sürümlerinde çalışır. hover: hovereski tarayıcılarda fareyle üzerine gelme efektlerini hover: nonebozar, daha önce tanımlanan tüm CSS kurallarını geçersiz kılmaları gerekir. Her ikisi de karışık fare ve dokunmatik cihazlarla uyumsuz .
En sağlam - JS ile dokunuşu algıla ve CSS'nin başına ekle: fareyle üzerine gelme kuralları
Bu yöntemin tüm fareyle üzerine gelme kurallarının başına eklenmesi gerekir body.hasHover. (veya seçtiğiniz bir sınıf adı)
body.hasHover a:hover { color: blue; }
hasHoverSınıf kullanılarak ilave edilebilir hasTouch()birinci örnekten elde edilen:
if (!hasTouch()) document.body.className += ' hasHover'
Bununla birlikte, bu, önceki örneklerle karışık dokunmatik cihazlarla aynı dezavantajlara sahip olabilir, bu da bizi nihai çözüme getirir. Fare imleci her hareket ettirildiğinde fareyle üzerine gelme efektlerini etkinleştir, dokunuş algılandığında fareyle üzerine gelme efektlerini devre dışı bırak.
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()
Bu temelde herhangi bir tarayıcıda çalışmalı ve gerektiğinde fareyle üzerine gelme stillerini etkinleştirir / devre dışı bırakır.
İşte tam örnek - modern: https://jsfiddle.net/57tmy8j3/
Eski (eski tarayıcılarla kullanım için): https://jsfiddle.net/dkz17jc5/19/