सीएसएस

Question

के माध्यम से सभी होवर प्रभाव हटाएं जब मैं स्पर्श उपकरणों पर आ जाता हूं तो मुझे होवर व्यवहार नहीं चाहिए। क्या पूरी वेबसाइट के लिए एक बार में सभी होवर प्रभाव अक्षम करना संभव है?

यह देखते हुए कि आप मॉडर्नज़्र का उपयोग स्पर्श करने और कक्षा को सेट करने के लिए करते हैं।

यह है कि मैं क्या के साथ आया है, लेकिन यह विसंगति का एक बहुत देता है:

html.touch *:hover { 
    color: inherit !important; 
    background: inherit !important; 
} 

वहाँ शुद्ध सीएसएस के साथ ऐसा करने के लिए एक रास्ता है? यदि नहीं, तो जावास्क्रिप्ट के साथ यह कैसे किया जा सकता है?

Answer 1

यह अच्छा है, लेकिन नहीं supported बहुत अच्छी तरह से:

html.touch *:hover { 
    all:unset!important; 
} 

लेकिन यह एक बहुत अच्छा support है:

html.touch *:hover { 
    pointer-events: none !important; 
} 

मेरे लिए निर्दोष काम करता है, यह सब हॉवर प्रभाव बनाता है जैसे कि जब आप बटन पर स्पर्श करते हैं तो यह हल्का हो जाएगा लेकिन माउस घटनाओं के प्रारंभिक होवर प्रभाव के रूप में छोटी गाड़ी को समाप्त नहीं करेगा।

Answer 2

all:unset या all:initial

html.touch *:hover { 
    all:unset!important; 
} 

समर्थन सीमित है (https://developer.mozilla.org/en-US/docs/Web/CSS/all)

Answer 3

का प्रयास कर रहा एक कैच-ऑल समाधान शायद मुश्किल होने जा रहा है की कोशिश करो। मैं सिर्फ अपने सीएसएस में कहीं भी बदल जाएगा जहाँ आप एक मंडराना परिभाषित:

.thing:hover {} 

Modernizr वर्ग में शामिल करने के:

html.no-touch .thing:hover {} 

हालांकि आप जानते हैं कि किसी भी समाधान का उपयोग करता है Modernizr एक नहीं होगा 'होना चाहिए शुद्ध सीएसएस समाधान 'के रूप में, Modernizr जावास्क्रिप्ट है।