tl; dr gunakan ini: https://jsfiddle.net/57tmy8j3/
Jika Anda tertarik mengapa atau apa pilihan lain yang ada, baca terus.
Quick'n'dirty - hapus: gaya hover menggunakan JS
Anda dapat menghapus semua aturan CSS yang mengandung :hovermenggunakan Javascript. Ini memiliki keuntungan karena tidak harus menyentuh CSS dan kompatibel bahkan dengan browser lama.
function hasTouch() {
return 'ontouchstart' in document.documentElement
|| navigator.maxTouchPoints > 0
|| navigator.msMaxTouchPoints > 0;
}
if (hasTouch()) {
try {
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) {}
}
Batasan: stylesheet harus dihosting di domain yang sama (artinya tidak ada CDN). Menonaktifkan hover pada perangkat mouse & sentuh campuran seperti Surface atau iPad Pro, yang mengganggu UX.
Hanya CSS - gunakan kueri media
Tempatkan semua aturan Anda: hover dalam satu @mediablok:
@media (hover: hover) {
a:hover { color: blue; }
}
atau sebagai alternatif, timpa semua aturan hover Anda (kompatibel dengan browser lama):
a:hover { color: blue; }
@media (hover: none) {
a:hover { color: inherit; }
}
Batasan: hanya berfungsi di iOS 9.0+, Chrome untuk Android, atau Android 5.0+ saat menggunakan WebView. hover: hovermenghentikan efek hover pada browser lama, hover: noneperlu mengganti semua aturan CSS yang telah ditentukan sebelumnya. Keduanya tidak kompatibel dengan perangkat mouse & sentuh campuran .
Yang paling kuat - deteksi sentuhan melalui JS dan tambahkan CSS: aturan hover
Metode ini perlu mempersiapkan semua aturan hover dengan body.hasHover. (atau nama kelas pilihan Anda)
body.hasHover a:hover { color: blue; }
The hasHoverkelas dapat ditambahkan dengan menggunakan hasTouch()dari contoh pertama:
if (!hasTouch()) document.body.className += ' hasHover'
Namun, hal ini memiliki kelemahan yang sama dengan perangkat sentuh campuran seperti contoh sebelumnya, yang membawa kita ke solusi pamungkas. Aktifkan efek hover setiap kali kursor mouse digerakkan, nonaktifkan efek hover setiap kali ada sentuhan yang terdeteksi.
function watchForHover() {
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()
Ini pada dasarnya harus berfungsi di browser apa pun dan mengaktifkan / menonaktifkan gaya hover sesuai kebutuhan.
Berikut contoh lengkapnya - modern: https://jsfiddle.net/57tmy8j3/
Legacy (untuk digunakan dengan browser lama): https://jsfiddle.net/dkz17jc5/19/