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

บทความที่เขียนโดย:
  • การออกแบบเว็บไซต์
  • อัปเดตเมื่อ: Feb 27, 2020

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

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

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

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

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

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

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

ตัวอย่าง 1 - เชื่อมโยงกับภาพปุ่ม hover

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

เราสร้างมันด้วย 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 ลงในพื้นที่ที่กำหนด นี่คือตัวอย่างของวิธีที่คุณสามารถทำได้

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> โฮมเพจ </a> </ p>

ตัวอย่าง 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) ลงในแท็ก <a href> ในซอร์สโค้ดของคุณ ตัวอย่าง:

<a href="http://www.webhostingsecretrevealed.com" class="y"> หน้าแรก </a>

สรุป

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

เกี่ยวกับ Jerry Low

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