วิธีสร้างลิงก์ที่มีภาพ hover ใน CSS ธรรมดา

อัปเดต: 27 ก.พ. 2020 / บทความโดย: Jerry Low

* หมายเหตุการอัพเดท: โพสต์นี้ตีพิมพ์ครั้งแรกในเดือนตุลาคม 2009 เทคนิคบางอย่างที่ฉันพูดถึงอาจล้าสมัย โปรดดูที่ คู่มือนี้สำหรับเทคนิคการสร้างเว็บไซต์ล่าสุด.

โฮเวอร์คืออะไร มีคำจำกัดความมาจาก UWStout.edu:

'โฮเวอร์' คือเอฟเฟกต์ที่เกิดขึ้นเมื่อคุณวางเคอร์เซอร์ไว้บนลิงก์ใด ๆ ลิงก์นี้สามารถเข้ารหัสเพื่อตอบสนองต่อการวางเมาส์ได้โดยการเปลี่ยนสีแสดงกราฟิกใหม่หรือแม้แต่เล่นไฟล์เสียง

เอฟเฟกต์โฮเวอร์ช่วยเพิ่มความสามารถในการใช้งานเว็บและช่วยให้เจ้าของเว็บกำหนดทิศทางการดูแลการแสดงโฆษณาบนเว็บ เมื่อคุณต้องการให้ผู้ใช้เว็บของคุณให้ความสำคัญกับลิงก์พิเศษวิธีที่ดีคือสร้างลิงก์ที่มีเอฟเฟกต์โฮเวอร์ที่น่าดึงดูด เอฟเฟกต์การวางเมาส์แบบเรียบง่ายเช่นนี้ (การขีดเส้นใต้และการเปลี่ยนสีของข้อความ) บ่งชี้ว่าข้อความเหล่านั้น "คลิกได้" และปรับปรุงการโต้ตอบบนเว็บ อย่างไรก็ตามการเปลี่ยนสีและรูปแบบข้อความ (ขีดเส้นใต้ / ทับเส้น / ตัวหนา) เป็นพื้นฐานมากและยังมีอีกมากมายที่สามารถทำได้ด้วยการวางเมาส์เหนือ

ในบทความนี้ฉันจะแสดงว่าคุณสามารถสร้างลิงค์ที่ดูดีได้อย่างไรโดยมีเอฟเฟกต์โฮเวอร์

ตัวอย่าง 1: เชื่อมโยงกับปุ่มเลื่อนระดับ

ขั้นแรกให้ดูตัวอย่างการทำงาน (วางเมาส์เหนือลิงก์เพื่อดูวิธีการทำงาน - เปลี่ยนไอคอนที่ด้านข้าง)

ตัวอย่างที่ 1 - เชื่อมโยงด้วยภาพปุ่มโฮเวอร์

นี่คือเวอร์ชันที่สมบูรณ์ของสิ่งที่จะสร้างขึ้นในตัวอย่างนี้

เราสร้างมันด้วย CSS แบบธรรมดาได้อย่างไร?

ภาพปุ่ม

ขั้นตอนที่ 1 ตามที่เห็นเราต้องมีไอคอนลูกศรในสองรูปแบบแตกต่างกัน ในตัวอย่างของเราเราใช้สีแดง (#CC3300) เป็นปุ่มลิงก์เริ่มต้น และสีเทา (#333333) สำหรับเอฟเฟ็กต์เลื่อน ปุ่มดังกล่าวสามารถทำได้โดยง่ายโดยใช้ซอฟต์แวร์แก้ไขภาพใด ๆ

ขณะนี้เรามีปุ่มสีแดง (กล่าวคือ b1.png) และสี rey (ปุ่มกล่าวว่า b2.png) รวมไฟล์เหล่านี้ไว้ในไฟล์รูปภาพหนึ่งไฟล์โดยใช้ b1.png ที่ด้านบนสุดของ b2.png นี่เป็นภาพสุดท้ายของเราสำหรับการเชื่อมโยง ตั้งชื่อ (พูด, x.png) และอัปโหลดตำแหน่งที่ต้องการ (สำหรับกรณีของฉันฉันวางไว้ในโฟลเดอร์เทมเพลต WP)

การอ้างอิงของคุณ:

b1.png , b2.png และ x.png

โค้ด CSS

ถัดไปในโค้ด CSS โดยทั่วไปสิ่งที่เราต้องการบรรลุคือการเยื้องข้อความลิงค์ไปทางขวาเล็กน้อยเพื่อให้มีพื้นที่ว่างสำหรับปุ่ม และในเวลาเดียวกันให้แสดงภาพอื่นเมื่อลิงก์อยู่ในสถานะเลื่อน สิ่งเหล่านี้ล้วนเป็นวัตถุดิบขั้นพื้นฐานยกเว้นว่าเราจำเป็นต้องบิดเล็กน้อยในตำแหน่งพื้นหลัง เคล็ดลับคือการแสดงส่วนบนของภาพ (ปุ่มสีแดง) สำหรับลิงก์ต้นฉบับ เมื่อเลื่อนเมาส์ไปวางภาพพื้นหลังด้วยเครื่องหมาย - 11px (อาจแตกต่างจากเว็บไซต์ของคุณ) เพื่อแสดงปุ่มสีเทา

.xa {color: #cc3300; padding-left: 14px; น้ำหนักตัวอักษร: ตัวหนา; ภาพพื้นหลัง: url (images / x.png); พื้นหลังตำแหน่ง: 0 2px; พื้นหลังซ้ำ: ไม่ทำซ้ำ; }
.xa: โฮเวอร์ {color: #333333; padding-left: 14px; น้ำหนักตัวอักษร: ตัวหนา; ภาพพื้นหลัง: url (images / x.png); พื้นหลังตำแหน่ง: 0 -11px; พื้นหลังซ้ำ: ไม่ทำซ้ำ; }

การดำเนินงาน

หากต้องการแสดงเอฟเฟกต์โฮเวอร์นี้เพียงแค่แทรกคลาส x ลงในพื้นที่ที่กำหนด นี่คือตัวอย่างของวิธีที่คุณสามารถทำได้

โฮมเพจ

ตัวอย่าง 2: เชื่อมโยงในพื้นหลังแบบเลื่อนลอย

ด้วยแนวคิดเดียวกันนี้มีวิธีมากมายที่คุณสามารถทำให้ลิงก์ของคุณดูเท่ห์ นี่เป็นอีกตัวอย่างของสิ่งที่เราสามารถทำได้กับเอฟเฟ็กต์โฮเวอร์ด้วยวิธีที่ต่างกันเล็กน้อย อีกครั้งดูที่รุ่นเสร็จแล้ว

ตัวอย่างที่ 2 - ลิงก์ในพื้นหลังที่วางเมาส์เหนือ

ในตัวอย่างนี้สิ่งที่ฉันจะทำคือการสร้างลิงก์แบบกดปุ่มที่พื้นหลังจะเปลี่ยนเมื่อผู้ใช้วางเมาส์ไว้เหนือพื้นหลัง

เราสร้างมันด้วย CSS แบบธรรมดาได้อย่างไร?

ภาพพื้นหลัง

ก่อนอื่นให้สร้างภาพสี่เหลี่ยมมุมมนสองรูป เพื่อวัตถุประสงค์ในการสาธิตเราจะไม่รวมสองภาพนี้ในตัวอย่างนี้ เราจะตั้งชื่อสี่เหลี่ยมผืนผ้าสีแดง (#CC3300) เป็น b1.png; และสี่เหลี่ยมสีแดง (#9F2800) เป็น b2.png

โค้ด CSS

ต่อไปนี้เป็นรหัสสำหรับสไตล์ชีตของคุณ (เรากำลังตั้งชื่อคลาส 'y' ในตัวอย่างที่สองนี้)

ay {width: 280px; ความสูง: 42px; สี: #000000; การขยาย: 10px; ตกแต่งข้อความ: none; จอแสดงผล: บล็อก; น้ำหนักตัวอักษร: ตัวหนา; ภาพพื้นหลัง: url (images / b1.png); พื้นหลังซ้ำ: ไม่ทำซ้ำ; }
ay: โฮเวอร์ {width: 280px; ความสูง: 42px; สี: #FFFFFF; การขยาย: 10px; น้ำหนักตัวอักษร: ตัวหนา; ตกแต่งข้อความ: none; จอแสดงผล: บล็อก; ภาพพื้นหลัง: url (images / b2.png); พื้นหลังซ้ำ: ไม่ทำซ้ำ; }

การดำเนินงาน

หากต้องการแสดงลิงก์ให้แทรกคลาส (y) ลงใน แท็กในซอร์สโค้ดของคุณ ตัวอย่าง:

โฮมเพจ

สรุป

ฉันหวังว่าบทความนี้จะให้ข้อมูลที่มีค่าแก่คุณและเป็นแรงบันดาลใจให้บางคนใช้ CSS ในวิธีที่สร้างสรรค์ หากมีประเด็นอื่นใดที่คุณคิดว่าฉันควรเพิ่มในคู่มือนี้อย่าลังเลที่จะแสดงความคิดเห็นของคุณในส่วนความคิดเห็น

เกี่ยวกับ Jerry Low

ผู้ก่อตั้ง WebHostingSecretRevealed.net (WHSR) - การตรวจสอบโฮสต์ที่เชื่อถือได้และใช้งานโดยผู้ใช้ของ 100,000 ประสบการณ์มากกว่า 15 ปีในเว็บโฮสติ้งการตลาดพันธมิตรและ SEO ผู้ร่วมให้ข้อมูลแก่ ProBlogger.net, Business.com, SocialMediaToday.com และอีกมากมาย