tl; dr इस का उपयोग करें: https://jsfiddle.net/57tmy8j3/
यदि आप रुचि रखते हैं कि क्यों या अन्य विकल्प क्या हैं, तो पढ़ें।
Quick'n'dirty - निकालें: JS का उपयोग करके होवर शैली
आप :hoverजावास्क्रिप्ट का उपयोग करते हुए सभी सीएसएस नियमों को हटा सकते हैं । यह सीएसएस को छूने और पुराने ब्राउज़रों के साथ भी संगत नहीं होने का लाभ है।
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) {}
}
सीमाएं: स्टाइलशीट को एक ही डोमेन पर होस्ट किया जाना चाहिए (इसका मतलब है कि कोई सीडीएन नहीं)। मिश्रित माउस और टच डिवाइस जैसे कि सरफेस या आईपैड प्रो पर होवर को अक्षम करता है , जो UX को नुकसान पहुंचाता है।
CSS-only - मीडिया क्वेरीज़ का उपयोग करें
अपने सभी नियमों को एक @mediaब्लॉक में रखें:
@media (hover: hover) {
a:hover { color: blue; }
}
या वैकल्पिक रूप से, अपने सभी होवर नियमों (पुराने ब्राउज़र के साथ संगत) को ओवरराइड करें:
a:hover { color: blue; }
@media (hover: none) {
a:hover { color: inherit; }
}
सीमाएँ: केवल वेब संस्करण का उपयोग करते समय iOS 9.0+, Android के लिए Chrome या Android 5.0+ पर काम करता है। hover: hoverपुराने ब्राउज़रों पर होवर के प्रभाव को तोड़ता है, hover: noneपहले से परिभाषित सभी सीएसएस नियमों को ओवरराइड करने की आवश्यकता है। दोनों मिश्रित माउस और स्पर्श उपकरणों के साथ असंगत हैं ।
सबसे मजबूत - जेएस के माध्यम से स्पर्श का पता लगाएं और सीएसएस को प्राथमिकता दें: होवर नियम
इस पद्धति को सभी होवर नियमों के साथ प्रस्तुत करने की आवश्यकता है 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/