লিঙ্ক হোভারের উপর বিবর্ণ প্রভাব?

Question

http://www.clearleft.com এর মতো অনেক সাইটে আপনি লক্ষ্য করবেন যে লিঙ্কগুলি যখন আটকানো হবে, তখনই তারা ডিফল্ট ক্রিয়াটি তত্ক্ষণাত পরিবর্তন করার বিপরীতে ভিন্ন বর্ণে ম্লান হয়ে যাবে।

আমি ধরে নিচ্ছি জাভা স্ক্রিপ্টটি এই প্রভাবটি তৈরি করতে ব্যবহৃত হয়, কেউ কীভাবে জানতে পারে?

Comments

ধন্যবাদ. এখন, আমি কীভাবে হোভার লিঙ্কগুলি তৈরি করব তা বুঝতে পেরেছি, আমি কীভাবে আমার হোভার লিঙ্কগুলির জন্য একটি স্বাচ্ছন্দ্য প্রভাব তৈরি করতে পারি তা বোঝার চেষ্টা করছি।

— মাইলস হেনরিখস

Answer 1

আজকাল লোকেরা কেবল CSS3 রূপান্তরগুলি ব্যবহার করছে কারণ এটি জেএসের সাথে জগাখিচা করার চেয়ে অনেক সহজ , ব্রাউজার সমর্থন যুক্তিসঙ্গতভাবে ভাল এবং এটি কেবল প্রসাধনী তাই এটি কাজ না করে তা বিবেচ্য নয়।

এরকম কিছু কাজটি সম্পন্ন করে:

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; }

আপনি বিভিন্ন ঘোষণাপত্রকে কমা দিয়ে পৃথক করে আলাদা আলাদা সময় এবং স্বাচ্ছন্দ্য সহ সুনির্দিষ্ট CSS বৈশিষ্ট্যগুলি স্থানান্তর করতে পারেন:

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

@ আন্ড্রেইক্রিস্টফ: ভাগ্যক্রমে আইই 10 তে কাজ করে ! কোনও বিক্রেতার উপসর্গের প্রয়োজন নেই (যা অদ্ভুত)।

— মার্সেল

আমি উভয়ই পরীক্ষা করে দেখেছি এবং আশা করি যদি সিএসএস উপায় jQuery উপায় হিসাবে মসৃণ এবং সাবলীল নয় তবে সঠিক কারণ খুঁজে পেয়েছি। আমি ভুল হলে আমাকে সংশোধন করুন।

— কিউমাস্টার

তুমি রক! ভাল ব্যাখ্যা করা হয়েছে, এটি দেখে আমাকে অনেক সাহায্য করেছেন।

— plast1K

আমার পরীক্ষাটি কোনও চিত্রের সাথে, কোনও লিঙ্কের সাথে নয়।

— ফিলিপ

আমার ধারণা অনুমান করা একটি প্রশ্ন পোস্ট করার জন্য @ ফিলিপমিকারোনিল্লি সবচেয়ে ভাল, অবশ্যই একটি সিনট্যাক্স সমস্যার মতো মনে হচ্ছে।

— মার্সেল

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>

এবং এখানে উপরের কোডের জন্য একটি জেএসফিডল !

---

মার্সেল উত্তরের একটিতে নির্দেশ করে যে আপনি "একাধিক সিএসএস বৈশিষ্ট্যগুলিকে রূপান্তর করতে পারেন" আপনি নীচের মতো আপনার সমস্ত স্ট্রিমের সাথে উপাদানটি প্রভাবিত করতে "সমস্ত" ব্যবহার করতে পারেন।

সিএসএস

.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

তার জন্য আপনার jqueryui দরকার নেই, কেবল jquery

— জুয়ান

@ জুয়ান না, জিকুয়ারি কেবল "একক সংখ্যাসূচক মানগুলি" সঞ্চার করতে পারে যা রঙ নয় (দেখুন api.jquery.com/animate/#animation-properties )। তবে আপনার আসলে পুরো jQueryUI লাইব্রেরি প্রয়োজন নেই, কেবল jQuery.Coror প্লাগইন, এটি jQueryUI- এ এমবেড হওয়ার জন্য ঘটে।

— নিক্লাস সাহলিন

@ নিক্লাস সাহলিন আমি সিএসএস রূপান্তরগুলির জন্য আপনার বেহাল সন্ধান পেয়েছি। আপনার JQuery-UI রূপান্তরটি এত বেশি মসৃণ, আমি নিশ্চিত ব্যবহারকারীরা এটি লক্ষ্য করবেন।

— রুবিউরব

সিএসএস সহ সমাধান রয়েছে যা কার্যকর করা সহজ

— মেন্কেল

Answer 4

আপনার সিএসএস এ চেষ্টা করুন:

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