अक्षम नहीं होने पर ही होवर और एक्टिव करें

187

मैं का उपयोग मंडराना , सक्रिय और विकलांग शैली बटन करने के लिए।

लेकिन समस्या यह है कि बटन अक्षम होवर और सक्रिय शैलियों अभी भी लागू होता है।

केवल सक्षम बटन पर हॉवर और सक्रिय कैसे लागू करें?

css

— अली
स्रोत

329

आप उपयोग कर सकते हैं : सक्षम छद्म वर्ग, लेकिन नोटिस IE<9इसका समर्थन नहीं करता है :

button:hover:enabled{
    /*your styles*/
}
button:active:enabled{
    /*your styles*/
}

— इंजीनियर
स्रोत

3

:not()चयनकर्ता भी है , लेकिन फिर, यह केवल IE9 के बाद से ही समर्थित है। देखें: developer.mozilla.org/en-US/docs/Web/CSS/:not

— jnns

button:hover:enabledमेरे मामले में काम नहीं किया। IE11 के तहत IE9 एमुलेशन का उपयोग करना।

— नियोलिस्क

76

.button:active:hover:not([disabled]) {
    /*your styles*/
}

आप यह कोशिश कर सकते हैं ..

— वेलायुथम अंजामनी
स्रोत

जब आप चाहते हैं कि "होवर अक्षम" राज्य "गैर-होवर अक्षम" स्थिति के समान दिखें, तो यह एक अच्छा समाधान है।

— मिखाइल लू

I <3 यह समाधान। मुझे निम्न करने की अनुमति देता है: <बटन वर्ग = "बटन"> होवर </ बटन> और <बटन वर्ग = "बटन नो-हॉवर> केवल उपयोग नहीं करके </ बटन> नहीं है: नहीं (.no- होवर)।

— बेन

35

सीएसएस में विशेषता "अक्षम" का उपयोग क्यों नहीं किया गया। यह सभी ब्राउज़रों पर काम करना चाहिए।

button[disabled]:hover {
    background: red;
}
button:hover {
    background: lime;
}

— Madef
स्रोत

13

सभी विकलांग राज्यों को एक पंक्ति में सभी का चयन करके कवर करें:.button[disabled], .button[disabled]:hover, .button[disabled]:focus, .button[disabled]:active {}

— DBK

13

सबसे आधुनिक ब्राउज़र (IE11 + और कुछ मोबाइल ओपेरा और IE ब्राउज़र को छोड़कर - http://caniuse.com/#feat=pointer-events ) में काम करने वाली एक निचली-विशिष्टता दृष्टिकोण :

.btn {
  /* base styles */
}

.btn[disabled]
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  color: red;
}

pointer-events: noneनियम मंडराना को निष्क्रिय कर देगा; .btn[disabled]:hoverहोवर शैली को कम करने के लिए आपको चयनकर्ता के साथ विशिष्टता बढ़ाने की आवश्यकता नहीं होगी ।

(FYI करें, यह साधारण HTML पॉइंटर-ईवेंट है, न कि विवादास्पद अमूर्त-इनपुट-डिवाइस पॉइंटर-ईवेंट)

— michai
स्रोत

12

Sass (scss) में:

 button {
  color: white;
  cursor: pointer;
  border-radius: 4px;

  &:disabled{
    opacity: 0.4;

    &:hover{
      opacity: 0.4;  //this is what you want
    }
  }

  &:hover{
    opacity: 0.9;
  }
}

— jakeforaker
स्रोत

10

यदि आप उपयोग कर रहे हैं LESSया Sass, आप यह कोशिश कर सकते हैं:

.btn {
  &[disabled] {
    opacity: 0.6;
  }
  &:hover, &:active {
    &:not([disabled]) {
      background-color: darken($orange, 15);
    }
  }
}

— fatlinesofcode
स्रोत

यह SASS में एक अच्छा समाधान है क्योंकि होवर इफेक्ट एक अक्षम बटन के लिए संसाधित हो जाएगा जब तक आप इसे ब्लॉक में नहीं लपेटते हैं।

— mbokil

2

एक तरीका यह है कि बटन को अक्षम करने और css में उस वर्ग के लिए होवर और सक्रिय राज्यों को ओवरराइड करते समय एक पक्षीय वर्ग जोड़ा जाए। या उस वर्ग पर होवर और सक्रिय छद्म गुणों को अक्षम करने और निर्दिष्ट करने के लिए एक वर्ग को हटाने पर केवल सीएसएस में। किसी भी तरह से, यह संभवत: शुद्ध रूप से सीएसएस के साथ नहीं किया जा सकता है, आपको थोड़ा सा js उपयोग करने की आवश्यकता होगी।

— techfoobar
स्रोत