Fade Effect บน Link Hover?

ในหลาย ๆ ไซต์เช่นhttp://www.clearleft.comคุณจะสังเกตเห็นว่าเมื่อลิงก์ถูกวางไว้เหนือลิงก์เหล่านี้จะจางหายไปเป็นสีที่แตกต่างกันเมื่อเทียบกับการเปลี่ยนทันทีซึ่งเป็นการกระทำเริ่มต้น

ฉันคิดว่า JavaScript ใช้เพื่อสร้างเอฟเฟกต์นี้มีใครรู้บ้างไหม?

ปัจจุบันผู้คนใช้การเปลี่ยน 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; }

คุณยังสามารถเปลี่ยนคุณสมบัติ 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; }

สาธิตที่นี่

ฉันรู้ในคำถามที่คุณระบุว่า "ฉันถือว่า JavaScript ถูกใช้เพื่อสร้างเอฟเฟกต์นี้" แต่ CSS ก็สามารถใช้ได้เช่นกันตัวอย่างด้านล่าง

CSS

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

HTML

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

และนี่คือJSFIDDLEสำหรับโค้ดด้านบน!

Marcel ในหนึ่งในคำตอบชี้ให้เห็นว่าคุณสามารถ "เปลี่ยนคุณสมบัติ CSS หลายรายการ" ได้นอกจากนี้คุณยังสามารถใช้ "ทั้งหมด" เพื่อสร้างเอฟเฟกต์องค์ประกอบด้วยรูปแบบ: โฮเวอร์ของคุณทั้งหมดดังต่อไปนี้

CSS

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

HTML

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

และนี่คือJSFIDDLEสำหรับตัวอย่าง "ทั้งหมด"!

คุณสามารถทำได้ด้วย JQueryUI:

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

http://jsfiddle.net/dWCbk/

ลองสิ่งนี้ใน css ของคุณ:

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