चलो कहते हैं कि मैं कुछ सीएसएस करते हैं ...क्या मैं रोक सकता हूं: किसी तत्व पर लागू होने से होवर करें?
button:hover { font-weight: bold }
मैं कैसे होगा पर लागू किया जा रहा, से :hover शैलियों रोका जा सकता है? मेरा लक्ष्य उपयोग केस तब होता है जब तत्व अक्षम होता है। उदाहरण के लिए, इस HTML के साथ ...
... :hover सीएसएस अभी भी लागू होता है। बटन फीका हो जाता है लेकिन :hover प्रभाव अभी भी देखा जा सकता है। इसे कैसे रोका जा सकता है?
सूचक-ईवेंट जोड़ने के लिए selectivizr.js उपयोग कर सकते हैं (या अन्य): कोई नहीं सभी मंडराना व्यवहार को निष्क्रिय कर देगा। अक्षम तत्वों के लिए बहुत उपयोगी
button[disabled] {
pointer-events: none;
}
प्रथम श्रेणी की सिफारिश! धन्यवाद! – Rafet
यह स्वीकार्य उत्तर होना चाहिए! IE <10 और OperaMini पर काम नहीं करता है हालांकि – zok
बस मैं जो कहने जा रहा था। – user2167582
होवर शैली को डिफ़ॉल्ट के समान बनाएं। इस सुविधा को चालू या बंद करने के लिए कक्षा का नाम उपयोग करें।
<button class="disabled" disabled>Click me</button>
button.disabled:hover { font-weight: inherit}
नोट यह * सक्षम * बटन शैलियों को भी प्रभावित करेगा। जो मुझे विश्वास नहीं है वह ओपी चाहता है। –
मुझे नहीं लगता कि एक तरह से सही मायने में करने के लिए शैलियों का एक सेट की अनदेखी है।
हालांकि, आप एक और विशिष्ट शैली बना सकते हैं जो hover शैलियों को ओवरराइड करता है।
button[disabled]:hover {
/* turn off button hover styles */
}
मैंने इरादा किया था कि तत्वों के बड़े लेकिन निश्चित सेट पर जो भी फिक्स इस्तेमाल किया जाए। यह संभवतः इस तक पहुंचने का सबसे लचीला तरीका है हालांकि यह कुछ अतिरिक्त रखरखाव जोड़ देगा। –
सच है। यह दुर्भाग्यपूर्ण है कि 'विरासत' जैसी कुछ चीजें इन परिस्थितियों के लिए स्केल नहीं करती हैं। सौभाग्य से हालांकि, यह कम से कम एक शुद्ध सीएसएस समाधान है। प्रदान किए गए कुछ अन्य जेएस या एचटीएमएल मार्कअप समाधानों के विरोध में। –
मैं अभी इस समस्या से जूझ रहा हूं और सीएसएस 3 चयनकर्ता का उपयोग करके समाधान के साथ आया हूं। यह पुराने IE ब्राउज़र द्वारा समर्थित नहीं है, लेकिन आप कार्यक्षमता
button {
// styles for non-disabled buttons
}
button:hover:not([disabled]) {
// styles for hover on non-disabled
}
button[disabled] {
cursor: default;
}
उपलब्ध प्रतिक्रियाओं को पढ़ने के बाद मैंने पाया कि उनमें से कोई भी मेरे लिए उपयुक्त नहीं होगा। मैंने सोचा कि इस के लिए एक आसान समाधान होना चाहिए। अंत में मैंने छद्म वर्गों को जंजीर बनाया। यह पूरी तरह से काम किया।
button:enabled:hover { font-weight: bold }
उदाहरण:
.hov:hover { color: red }
.hov2:enabled:hover { color: green }<p>Without fix</p>
<button class="hov">Hover me</button>
<button class="hov" disabled>Hover me</button>
<p>With fix</p>
<button class="hov2">Hover me</button>
<button class="hov2" disabled>Hover me</button>यदि सक्षम छद्म कोड (:) और मंडराना छद्म कोड (:) कोड सीएसएस प्रदर्शन करने के लिए उपयोग किया जा रहा देखा।
मैंने इस धागे को खोला जाने के बाद से कुछ समय की सराहना की, लेकिन सोचा कि यह दूसरों की मदद कर सकता है।
ग्रेट ... और सभी आधुनिक ब्राउज़रों और आईई 9 + – Ruskin
अपनी ओवरराइड बटन कक्षा में संपत्ति 'परिवर्तन: कोई नहीं' रखो।
का समर्थन करता है यह क्या अंतर करेगा, यह देखते हुए कि परिवर्तन का प्रारंभिक मूल्य वैसे भी नहीं है? – BoltClock
इस (लेकिन pointer-events: none; का उपयोग कर के रूप में के रूप में कुशल नहीं) करने के लिए एक और तरीका है, दोनों "अक्षम" पर एक ही गुण सेट और "जब विकलांग मंडराना" के लिए है:
input:hover{
color: #0CB;
}
input[type=button]:hover:disabled{
color: grey;
}<input type="button" value="Try Me !" />
<input type="button" value="Why not Me ?" disabled/>यह सबसे सुंदर नहीं है, लेकिन यह भी काम करता है।
कुछ जेएस के साथ आप केवल क्लास को जोड़कर और हटाकर सक्षम तत्वों के लिए होवर तत्व लागू कर सकते हैं। तो 'बटन: होवर' 'बटन बन जाता है। सक्षम: होवर'। – JohnP
'अक्षम' विशेषता में मूल्य जोड़ें, यदि आप चाहते हैं कि आपका कोड मानकों के अनुरूप हो। – Hauleth
@Hauleth कोई मान मान्य नहीं है HTML5 http://stackoverflow.com/questions/4418114/should-i-use-html5-syntax –