सीएसएस - सीएसएस, सीएसएस 3, सीएसएस-संक्रमण के साथ माउसओवर 2 रंग

मेनू आइटम डिफ़ॉल्ट पृष्ठभूमि-रंग सफेद है। माउस होवर का रंग नीला है

मेरा सवाल यह है कि -

यदि हम मेनू आइटम पर माउस होवर पर पकड़ रखते हैं। पहले नीला रंग दिखाने की आवश्यकता है बाद में 1 या 2 सेकंड रंग को किसी अन्य रंग पीले में बदलना चाहिए।

क्या यह सीएसएस संक्रमण या सीएसएस के साथ किसी भी विचार के साथ संभव है?

उत्तर:

जवाब के लिए 3 № 1

शायद यह मदद करो

एचटीएमएल

<div class="test"><div></div></div>​​​​​​​​​​​​​​​​

सीएसएस

​.test{
width:100px;
height:100px;
background-color:#0ff;
-webkit-transition:background-color 1s ease-in;
-moz-transition:background-color 1s ease-in;
-o-transition:background-color 1s ease-in;
transition:background-color 1s ease-in;
}
.test div{
width:100px;
height:100px;
-webkit-transition:background-color 3s ease-in;
-moz-transition:background-color 3s ease-in;
-o-transition:background-color 3s ease-in;
transition:background-color 3s ease-in;
}
.test:hover{
background-color:#f00;
}

.test div:hover{
background-color:green;
}

​jsFiddle

---

उत्तर № 2 के लिए 1

आप CSS3 एनिमेशन (आधुनिक ब्राउज़रों में काम करता है) के साथ इस लक्ष्य को प्राप्त कर सकते हैं ।यहाँ "एक उदाहरण है जो ग्रे से नीले और फिर पीले रंग के लिए बटन को बदलता है ।

उम्मीद है की वो मदद करदे!

डेमो - jsFiddle

एचटीएमएल

<div class="button"></div>

सीएसएस

.button {
width: 150px;
height: 50px;
background-color: #e3e3e3;
border: 1px solid #000000;
}

.button:hover {
-webkit-animation: color 1.0s forwards;
-moz-animation: color 1.0s forwards;
-o-animation: color 1.0s forwards;
}

@-webkit-keyframes color {
0%   { background-color: #0000ff; }
50%  { background-color: #0000ff; }
100% { background-color: #ffff00; }
}

@-moz-keyframes color {
0%   { background-color: #0000ff; }
50%  { background-color: #0000ff; }
100% { background-color: #ffff00; }
}

@-o-keyframes color {
0%   { background-color: #0000ff; }
50%  { background-color: #0000ff; }
100% { background-color: #ffff00; }
}

---

जवाब के लिए 0 № 3

मुझे लगता है कि यह हो सकता है कि तुम क्या देख रहे हो । http://www.acuras.co.uk/articles/53-javascript--css-flashing-text--how-to-do-it--why-not-to-do-it

ईमानदारी से, मुझे पता नहीं क्यों आप इस तरह के एक लिंक की जरूरत है, यह सिर्फ अपनी वेबसाइट की तरह यह एक पूरी शुरुआत द्वारा बनाया गया था, क्योंकि यह बहुत विचलित है लग रहे हो जाएगा ।वहां बहुत अच्छे एनिमेशन और plugins वहां रहे हैं, खासकर यदि आप jQuery का उपयोग करें ।प्रेरणा के लिए इस बाहर की जांच करें: http://bestofjquery.com/

---