लिंक हॉवर पर फीका असर?

Question

कई साइटों पर, जैसे कि http://www.clearleft.com , आप देखेंगे कि जब लिंक पर मँडरा जाता है, तो वे तुरंत स्विचिंग, डिफ़ॉल्ट क्रिया के विपरीत एक अलग रंग में फीका हो जाएगा।

मुझे लगता है कि इस प्रभाव को बनाने के लिए जावास्क्रिप्ट का उपयोग किया जाता है, क्या किसी को पता है कि कैसे?

Comments

धन्यवाद। अब, मैं समझता हूं कि हॉवर लिंक कैसे बनाया जाता है, यह सिर्फ इतना है कि मैं यह जानने की कोशिश कर रहा हूं कि मेरे हॉवर लिंक के लिए एक स्मूथ इफेक्ट कैसे बनाया जाए।

— माइल्स हेनरिच

Answer 1

आजकल लोग बस CSS3 के बदलावों का उपयोग कर रहे हैं क्योंकि यह JS के साथ खिलवाड़ करने की तुलना में बहुत आसान है , ब्राउज़र समर्थन काफी अच्छा है और यह केवल कॉस्मेटिक है इसलिए यह काम नहीं करता है।

कुछ इस तरह काम हो जाता है:

a {
  color:blue;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}
a:hover { color:red; }

आप विशिष्ट सीएसएस संपत्तियों को अलग-अलग समय के साथ परिवर्तित कर सकते हैं और प्रत्येक घोषणा को अल्पविराम से अलग करके कार्यों को आसान बना सकते हैं, जैसे:

a {
  color:blue; background:white;
  -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color .2s ease-out, background 1s ease-in;
}
a:hover { color:red; background:yellow; }

यहां डेमो करें

Comments

@AndreiCristof: सौभाग्य से IE10 में काम करता है ! कोई भी विक्रेता उपसर्ग आवश्यक नहीं है (जो अजीब है)।

— मार्सेल

मैंने दोनों का परीक्षण किया और मुझे उम्मीद है कि अगर मुझे सही कारण मिला कि CSS तरीका jQuery के तरीके के रूप में चिकना और धाराप्रवाह नहीं है। कृपया मुझे सुधारें अगर मैं गलत हूं।

— प्र

आपने धमाल मचाया! अच्छी तरह से समझाया, यह देखकर मुझे बहुत मदद मिली।

— plast1K

मेरी परीक्षा एक छवि के साथ है, एक कड़ी के साथ नहीं।

— फेलिप

@FelipeMicaroniLalli एक प्रश्न पोस्ट करने के लिए सबसे अच्छा, मुझे लगता है, निश्चित रूप से एक वाक्यविन्यास समस्या की तरह लगता है।

— मार्सेल

Answer 2

मुझे पता है कि आप सवाल में कहते हैं "मुझे लगता है कि जावास्क्रिप्ट का उपयोग इस प्रभाव को बनाने के लिए किया जाता है" लेकिन सीएसएस का भी उपयोग किया जा सकता है, एक उदाहरण नीचे है।

सीएसएस

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: color 0.3s linear;
   -webkit-transition: color 0.3s linear;
   -moz-transition: color 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
}

एचटीएमएल

<a class="fancy-link" href="#">My Link</a>

और यहाँ उपरोक्त कोड के लिए एक JSFIDDLE है !

---

उत्तर में से एक में मार्सेल बताता है कि आप "कई सीएसएस गुणों का संक्रमण कर सकते हैं" आप नीचे दिए गए सभी प्रकार की होवर शैलियों के साथ तत्व को प्रभावित करने के लिए "सभी" का भी उपयोग कर सकते हैं।

सीएसएस

.fancy-link {
   color: #333333;
   text-decoration: none;
   transition: all 0.3s linear;
   -webkit-transition: all 0.3s linear;
   -moz-transition: all 0.3s linear;
}

.fancy-link:hover {
   color: #F44336;
   padding-left: 10px;
}

एचटीएमएल

<a class="fancy-link" href="#">My Link</a>

और यहाँ "सभी" उदाहरण के लिए एक JSFIDDLE है !

Answer 3

आप इसे JQueryUI के साथ कर सकते हैं:

$('a').mouseenter(function(){
  $(this).animate({
    color: '#ff0000'
  }, 1000);
}).mouseout(function(){
  $(this).animate({
    color: '#000000'
  }, 1000);
});

http://jsfiddle.net/dWCbk/

Comments

आपको उसके लिए जक्वेरी की जरूरत नहीं है, बस जक्वरी

— जुआन

@Juan नहीं, jQuery केवल "एकल संख्यात्मक मान" को चेतन कर सकता है जो रंग नहीं हैं (देखें api.jquery.com/animate/#animation-properties )। लेकिन आपको वास्तव में पूरे jQueryUI पुस्तकालय की आवश्यकता नहीं है, बस jQuery.Color प्लगइन, जो कि jQueryUI में एम्बेडेड होना चाहिए।

— निकल्स सहलिन

@ निलास सहलिन। मैंने सीएसएस संक्रमणों के लिए आपकी फिडेल खोज की। आपका JQuery- यूआई संक्रमण इतना चिकना है, मुझे यकीन है कि उपयोगकर्ता इसे नोटिस करेंगे।

— RubyRube

सीएसएस के साथ समाधान हैं, जो लागू करने के लिए आसान है

— मिन्केल

Answer 4

अपने सीएसएस में यह कोशिश करें:

.a {
    transition: color 0.3s ease-in-out;
}
.a {
    color:turquoise;
}
.a:hover {
    color: #454545;
}