पृष्ठभूमि-रंग का संक्रमण

Question

मैं के साथ एक संक्रमण प्रभाव बनाने की कोशिश कर रहा हूँ background-color मेनू आइटम मँडराते समय , लेकिन यह काम नहीं करता है। यहाँ मेरा CSS कोड है:

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Firefox */
    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
}

#nav divएक मेनू है ulआइटम की सूची।

Comments

सिर्फ FYI करें, यह अब फ़ायरफ़ॉक्स में काम करता है। FF9 में परीक्षण किया गया।

— C.Brown

Answer 1

जहाँ तक मुझे पता है, वर्तमान में सफारी, क्रोम, फ़ायरफ़ॉक्स, ओपेरा और इंटरनेट एक्सप्लोरर 10+ में बदलाव काम करते हैं।

यह इन ब्राउज़रों में आपके लिए एक फीका प्रभाव उत्पन्न कर सकता है:

a {
    background-color: #FF0;
}

a:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

<a>Navigation Link</a>

टिप्पणी: जैसा कि गेराल्ड द्वारा टिप्पणियों में कहा गया है, यदि आप संक्रमण डालते हैं, तो aइसके बजाय a:hoverयह मूल रंग में वापस आ जाएगा जब आपका माउस लिंक से हट जाएगा।

यह काम आ सकता है, भी: सीएसएस बुनियादी बातों: सीएसएस 3 संक्रमण

Comments

content #nav aजब उपयोगकर्ता माउस को लिंक से दूर ले जाता है, तो आप मूल में वापस लुप्त होने के लिए भी बदलाव कर सकते हैं ।

— गज

मंडराने के साथ फिडल और संक्रमण पर क्लिक करें : jsfiddle.net/K5Qyx

— डेम पिलाफियन

क्या transition:नॉन-होवर में डालना बेहतर नहीं होगा ? मुझे लगता है कि हर बार जब उपयोगकर्ता होवर करता है, तो संक्रमण संकलित किया जाता है ..

— Matej

@ इलियम लिंक मर चुका है

— फेरडीनेटर

सीएसएस transitionप्रतीत होता है कि "लीनियर-ग्रेडिएंट" का रंग संभाल नहीं सकता है जैसा कि यहां परीक्षण किया जा सकता है । और btw, @ इलियम का जवाब समाधान के रूप में चिह्नित करने का हकदार है।

— स्टैकी

Answer 2

मेरे लिए, संक्रमण कोड को मूल / न्यूनतम चयनकर्ताओं के साथ रखना बेहतर है: होवर या किसी अन्य अतिरिक्त चयनकर्ता के साथ:

#content #nav a {
    background-color: #FF0;
    
    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

#content #nav a:hover {
    background-color: #AD310B;
}

<div id="content">
    <div id="nav">
        <a href="#link1">Link 1</a>
    </div>
</div>

Comments

ऐसा नहीं है कि यह बेहतर है या बदतर है। यह सिर्फ इतना है कि यदि आप लीमेंट पर संक्रमण को स्वयं निर्दिष्ट करते हैं, तो यह एनिमेटेड हो जाएगा जब तत्व होवर हो जाता है और जब इसे "अन-होवर" मिलता है। यदि आप इसे लागू करते हैं: होवर करने के लिए, आपके पास एक एनीमेशन होगा जब माउस प्रवेश करता है, लेकिन जब यह नहीं निकलता है।

— लुकासबीफ

यह समाधान कुल मिलाकर बेहतर है। संक्रमण का प्रभाव होवर पर फीका पड़ने और धुंधला होने पर फीका पड़ने की आशंका होना चाहिए।

— चेजल