วัตถุประสงค์ของคู่มือนี้คือการสำรวจวิธีการเปลี่ยนรูปภาพบนโฮเวอร์โดยใช้ CSS เริ่มกันเลย!
:hover ใน CSS คืออะไร
:hover เป็นองค์ประกอบของคลาสหลอกที่ใช้ในการเปลี่ยนสถานะขององค์ประกอบ HTML เมื่อเมาส์เรียกมัน ตัวเลือก CSS นี้ใช้เพื่อจัดรูปแบบหรือเลือกองค์ประกอบเป็นหลัก อย่างไรก็ตาม ไม่สามารถใช้กับลิงก์ได้
ไวยากรณ์
ไวยากรณ์ของ :hover ได้รับด้านล่าง:
ธาตุ : โฉบ {
โค้ด CSS . .
}
ที่นี่, ' ธาตุ ” หมายถึงองค์ประกอบที่คุณต้องการใช้เอฟเฟกต์โฮเวอร์
ตอนนี้ เราจะย้ายไปยังตัวอย่างที่ใช้งานได้จริงของการเปลี่ยนรูปภาพเมื่อวางเมาส์เหนือโดยใช้ CSS
ตัวอย่าง: จะเปลี่ยนรูปภาพบน Hover โดยใช้ CSS ได้อย่างไร?
หากต้องการเปลี่ยนภาพเมื่อวางเมาส์เหนือก่อน ให้เพิ่มสองภาพในส่วน HTML ภาพแรกมีไว้สำหรับสถานะใช้งาน และภาพถัดไปสำหรับสถานะโฮเวอร์
ขั้นตอนที่ 1: เพิ่มรูปภาพ
สำหรับวัตถุประสงค์ที่ระบุ เราจะเพิ่มภาพสองภาพ “ image1 ' และ ' image2 ” และกำหนดชื่อคลาสให้กับรูปภาพที่สองเป็น “ hover_img ”
HTML
< ร่างกาย >< div ระดับ = 'ไอจี' >
< img src = 'image1.png' >
< img src = 'image2.png' ระดับ = 'โฮเวอร์_img' >
< / div >
< / ร่างกาย >
ขั้นตอนที่ 2: สไตล์รูปภาพ
ตอนนี้ ย้ายไปที่ CSS เพื่อกำหนดตำแหน่งของทั้งสองภาพโดยใช้ “ ตำแหน่ง ' คุณสมบัติ. เราจะกำหนดตำแหน่งเป็น “ แน่นอน ” เพื่อวางตำแหน่งโดยอ้างอิงถึงผู้ปกครองที่ใกล้เคียงที่สุด
CSS
.img {ตำแหน่ง : แน่นอน ;
}
ซึ่งจะแสดงผลดังต่อไปนี้:
ในขั้นตอนต่อไป เราจะตั้งภาพที่สองไว้ข้างหน้าภาพแรก ในการทำเช่นนั้น เราจะกำหนดตำแหน่งของภาพเป็น “ แน่นอน ” และตั้งค่าตำแหน่งบนและซ้ายเป็น “ 0 ” การใช้รูปภาพนี้ถูกวางไว้ที่ด้านหน้าของรูปภาพแรก แต่เราต้องการแสดงรูปภาพที่สองเมื่อวางเมาส์ไว้บนรูปภาพ ดังนั้น ตั้งค่าการแสดงผลเป็น “ ไม่มี ” จะแสดงผลที่ต้องการ:
.hover_img {ตำแหน่ง : แน่นอน ;
สูงสุด : 0 ;
ซ้าย : 0 ;
แสดง : ไม่มี ;
}
ผลลัพธ์ของรหัสที่กำหนดมีดังนี้:
ภาพที่สองถูกซ่อนไว้สำเร็จหลังภาพแรก
ตอนนี้ไปยังขั้นตอนถัดไป
ขั้นตอนที่ 3: เปลี่ยนรูปภาพบน Hover
ต่อไป ใช้ “ :โฮเวอร์ ” และเลือก “ .img ” เพื่อใช้โฮเวอร์กับองค์ประกอบที่เลือก จากนั้นกำหนดชื่อคลาสของภาพที่สอง “ .hover_img ” หลังจากนั้น ในวงเล็บ ให้ตั้งค่าคุณสมบัติการแสดงผลเป็น “ อินไลน์ ” ซึ่งจะบังคับให้องค์ประกอบอยู่ในบรรทัดเดียวกัน:
.img : โฉบ .hover_img {แสดง : อินไลน์ ;
}
นี่คือผลลัพธ์ที่แสดงให้เห็นว่ารูปภาพเปลี่ยนไปเมื่อผู้ใช้วางเมาส์เหนือรูปภาพ:
ผลลัพธ์ที่ระบุข้างต้นบ่งชี้ว่าเราได้เปลี่ยนรูปภาพเมื่อวางเมาส์ไว้โดยใช้ CSS เรียบร้อยแล้ว
บทสรุป
สามารถเปลี่ยนรูปภาพได้เมื่อวางเมาส์ไว้โดยใช้ปุ่ม “ :โฮเวอร์ ” องค์ประกอบระดับหลอก ในการดำเนินการดังกล่าว ให้เพิ่มรูปภาพที่จำเป็นในไฟล์ HTML ตั้งค่าให้อยู่ในตำแหน่งเดียวกันโดยใช้ CSS และใช้ตัวเลือก :hover กับรูปภาพเหล่านั้น ด้วยเหตุนี้ ภาพแรกจะเปลี่ยนไปเมื่อวางเมาส์เหนือภาพนั้น ในบทความนี้ เราได้อธิบายวิธีเปลี่ยนรูปภาพเมื่อวางเมาส์เหนือโดยใช้ :hover พร้อมตัวอย่างที่ใช้งานได้จริง