2013-10-14 12 views
8

नमस्कार हर कोई मैं वर्तमान में एक संक्रमण करने की कोशिश कर रहा हूं जब आप पृष्ठभूमि को बैंगनी हो जाते हैं और टेक्स्ट-रंग सफेद हो जाता है। (मूल रूप से कोई पृष्ठभूमि रंग नहीं होता है और टेक्स्ट-रंग काला होता है ...)सीएसएस- संक्रमण काम नहीं कर रहा

लेकिन यह काम नहीं कर रहा है!

यह क्या है कि मैं गलत कर रहा हूं !?

a:hover { 
    color: white; 
    -webkit-transition: color 1000ms linear; 
    -moz-transition: color 1000ms linear; 
    -o-transition: color 1000ms linear; 
    -ms-transition: color 1000ms linear; 
    transition: color 1000ms linear; 
    background-color: purple; 
    -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; 
} 

तो /// संपादित के रूप में हर कोई एक के बजाय एक पर इसे जोड़ने के लिए मुझे बता रहता है: मंडराना ...

प्रारंभिक राज्य:

text-color:black; 
background:none; 

hovered राज्य:

चिकना संक्रमण:

text-color:white; 
background:black; 

मुझे आशा है कि यह हर किसी को आपकी मदद के लिए धन्यवाद!

+0

यह यहाँ काम कर रहा है। http://jsfiddle.net/4zhnP/ ... क्या आप ऐसा कुछ चाहते थे? http://jsfiddle.net/pySY4/ –

+1

यदि आप कुछ HTML शामिल करते हैं तो यह आसान होगा। आपको कुछ ऐसा करने की आवश्यकता हो सकती है जैसे '.header> .navlinks> li> a: होवर' – Albzi

+0

@ जोशसी हाँ कुछ ऐसा है लेकिन चिकना है! – user2766367

उत्तर

6

उन्हें एक (नहीं होवर) पर रख दिया और यदि आप कई बदलाव चाहते हैं आप उन्हें एक साथ घोषित करने के लिए है।

-webkit-transition: color 1000ms linear, background-color 1000ms linear; 

http://jsfiddle.net/4zhnP/1/

+0

धन्यवाद, आपका विवरण और आपके समाधान ने स्पष्ट और संक्षिप्त जानकारी प्रदान की है कि इसे क्यों और कैसे किया जाए। : डी – user2766367

4

होवर प्रॉपर्टी पर संक्रमण सेट न करें।

a { 
color: white; 
-webkit-transition: color 1000ms linear; 
-moz-transition: color 1000ms linear; 
-o-transition: color 1000ms linear; 
-ms-transition: color 1000ms linear; 
transition: color 1000ms linear; 
background-color: purple; 
-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; 
} 

फिर :hover संपत्ति पर वास्तव में क्या बदल रहा है सेट करें। उदाहरण के लिए,

a:hover{ 
color:green; 
} 
+0

ठीक है, तो अगर मैं शुरुआत में टेक्स्ट-रंग काला होना चाहता था, और कोई पृष्ठभूमि नहीं थी और एक बार जब आप संक्रमण को घुमाते हैं तो पृष्ठभूमि रंग बैंगनी और टेक्स्ट-रंग सफेद कैसे शुरू होता है? – user2766367

+1

@ user2766367 आपके पास ऐसा कुछ होगा: 'ए: होवर {पृष्ठभूमि: बैंगनी; रंग: सफ़ेद;}' – Albzi

1

आप a:hover के बजाय, a पर संक्रमण स्थापित करने के लिए प्रयास करना चाहिए।

आप यहाँ बदलाव पर अधिक जानकारी प्राप्त कर सकते हैं: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

+1

आप इसकी अनुशंसा क्यों करेंगे? – user2766367

संबंधित मुद्दे