tl; dr ใช้สิ่งนี้: https://jsfiddle.net/57tmy8j3/
หากคุณสนใจว่าทำไมหรือมีตัวเลือกอะไรอีกบ้างอ่านต่อ
Quick'n'dirty - ลบ: วางเมาส์เหนือสไตล์โดยใช้ JS
คุณสามารถลบกฎ CSS ทั้งหมดที่มี:hoverโดยใช้ Javascript สิ่งนี้มีข้อดีคือไม่ต้องแตะ CSS และเข้ากันได้แม้กับเบราว์เซอร์รุ่นเก่า
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) {}
}
ข้อ จำกัด : สไตล์ชีตต้องโฮสต์บนโดเมนเดียวกัน (ซึ่งหมายความว่าไม่มี CDN) ปิดใช้งานการวางเมาส์บนอุปกรณ์เมาส์และสัมผัสแบบผสมเช่น Surface หรือ iPad Pro ซึ่งทำให้ UX เสียหาย
CSS เท่านั้น - ใช้แบบสอบถามสื่อ
วางกฎ: โฮเวอร์ของคุณทั้งหมดใน@mediaบล็อก:
@media (hover: hover) {
a:hover { color: blue; }
}
หรือแทนที่กฎโฮเวอร์ทั้งหมดของคุณ (เข้ากันได้กับเบราว์เซอร์รุ่นเก่า):
a:hover { color: blue; }
@media (hover: none) {
a:hover { color: inherit; }
}
ข้อ จำกัด : ใช้งานได้เฉพาะบน iOS 9.0+, Chrome สำหรับ Android หรือ Android 5.0+ เมื่อใช้ WebView hover: hoverแบ่งผลการวางเมาส์บนเบราว์เซอร์รุ่นเก่าhover: noneจำเป็นต้องแทนที่กฎ CSS ที่กำหนดไว้ก่อนหน้านี้ทั้งหมด ทั้งสองอย่างเข้ากันไม่ได้กับอุปกรณ์เมาส์และสัมผัสแบบผสมเข้ากันได้กับอุปกรณ์เมาส์และสัมผัสผสม
แข็งแกร่งที่สุด - ตรวจจับการสัมผัสผ่าน JS และนำหน้า CSS: hover rules
วิธีนี้ต้องมีการกำหนดกฎโฮเวอร์body.hasHoverไว้ล่วงหน้าด้วย (หรือชื่อชั้นเรียนที่คุณเลือก)
body.hasHover a:hover { color: blue; }
hasHoverชั้นอาจจะเพิ่มการใช้hasTouch()จากตัวอย่างแรก:
if (!hasTouch()) document.body.className += ' hasHover'
อย่างไรก็ตามสิ่งนี้จะมีข้อเสียเช่นเดียวกับอุปกรณ์สัมผัสแบบผสมดังตัวอย่างก่อนหน้านี้ซึ่งนำเราไปสู่โซลูชันขั้นสูงสุด เปิดใช้งานเอฟเฟกต์โฮเวอร์เมื่อใดก็ตามที่มีการย้ายเคอร์เซอร์ของเมาส์ปิดใช้งานเอฟเฟกต์โฮเวอร์เมื่อตรวจพบการสัมผัส
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()
สิ่งนี้ควรใช้งานได้โดยทั่วไปในเบราว์เซอร์ใด ๆ และเปิด / ปิดใช้งานสไตล์โฮเวอร์ตามต้องการ
นี่คือตัวอย่างฉบับเต็ม - modern: https://jsfiddle.net/57tmy8j3/
Legacy (สำหรับใช้กับเบราว์เซอร์เก่า): https://jsfiddle.net/dkz17jc5/19/