Skip to main content

ฉันจะสร้างเอฟเฟกต์โฮเวอร์ CSS ได้อย่างไร

เอฟเฟกต์โฮเวอร์ CSS นั้นค่อนข้างง่ายในการสร้างและเอฟเฟกต์โฮเวอร์ขั้นพื้นฐานสามารถนำไปใช้และแก้ไขได้อย่างรวดเร็วและง่ายดายด้วยตัวเลือกอื่น ๆ อีกมากมายCascading Style Sheets (CSS) เป็นภาษาที่ใช้ในการสร้างสไตล์และเค้าโครงของเอกสารที่สร้างขึ้นในภาษามาร์กอัปและสามารถใช้เพื่อสร้างเอฟเฟกต์โฮเวอร์ได้อย่างง่ายดายเอฟเฟกต์โฮเวอร์คือการเปลี่ยนแปลงที่เกิดขึ้นกับข้อความรูปภาพหรือวัตถุอื่น ๆ ในเอกสารเมื่อตัวชี้ควบคุมโดยเมาส์จะถูกวางตัวลงบนวัตถุโดยทั่วไปแล้วเอฟเฟกต์โฮเวอร์ CSS จะถูกสร้างขึ้นภายในรหัส CSS และสามารถนำไปใช้ได้อย่างรวดเร็วและมีประสิทธิภาพ

หนึ่งในประเภทที่ง่ายที่สุดของเอฟเฟกต์ CSS โฮเวอร์เพื่อสร้างเป็นผลที่ทำให้เกิดการเปลี่ยนแปลงลิงก์บนเว็บไซต์ตัวอย่างเช่นบางคนอาจต้องการสร้างลิงก์ข้อความที่ดูเหมือนข้อความมาตรฐานหรือเป็นสีที่แตกต่างจากส่วนที่เหลือของหน้า แต่เมื่อ "moused over" หรือ "วนเวียนอยู่" มันจะถูกขีดเส้นใต้หรือฝังตัววิธีการทำสิ่งนี้โดยทั่วไปจะขึ้นอยู่กับการเข้ารหัสที่แน่นอนที่ใช้ในหน้า แต่ในกรณีง่ายๆเอฟเฟกต์ CSS Hover สามารถเพิ่มได้ภายในกฎ CSS ภายในส่วน "สไตล์"เอฟเฟกต์ CSS โฮเวอร์โดยใช้แท็กที่เหมาะสมสำหรับวัตถุที่เพิ่มเอฟเฟกต์ตัวอย่างเช่นข้อความที่ถูกเลือกอาจเป็นส่วนหนึ่งของรายการหรือเลือกภายในเนื้อหาของหน้าเว็บข้อความนี้ควรมีแท็กเฉพาะที่เกี่ยวข้องในการเข้ารหัสร่างกายตามที่ระบุไว้ในแท็กนี้กฎสามารถสร้างขึ้นเพื่อสร้างเอฟเฟกต์ CSS Hover สำหรับวัตถุใด ๆ ที่มีแท็กที่กำหนด

การใช้ข้อความตัวอย่างเช่นหากคุณต้องการทำให้ลิงก์ขีดเส้นใต้เมื่อผู้ใช้เลื่อนไปสามารถเริ่มต้นด้วยการติดแท็กลิงก์นั้นภายในรหัสร่างกายและสร้างกฎพิเศษสำหรับแท็กนั้นภายในกฎนี้คุณสามารถระบุสีที่ควรจะเป็นสีใดที่ทำให้โดดเด่นจากข้อความโดยรอบและแสดงให้เห็นว่าผู้ใช้อาจต้องการวางเมาส์เหนือมันซึ่งจะทำให้เกิดเอฟเฟกต์ CSS Hoverเอฟเฟกต์นี้จะถูกเพิ่มโดยการสร้าง“ โฮเวอร์หลอกคลาส” ลงในแท็กสำหรับบรรทัดข้อความ

ถ้าแท็กสำหรับข้อความตัวอย่างเช่น“ A” จากนั้นคุณจะใช้คลาสหลอกที่ดูเหมือน“ตอบ: โฮเวอร์ {…}” พร้อมกับเอฟเฟกต์โฮเวอร์ CSS ที่ต้องการที่ระบุไว้ในวงเล็บการใช้ตัวอย่างก่อนหน้านี้หากเอฟเฟกต์ที่ต้องการคือการขีดเส้นใต้ข้อความเมื่อมันลอยขึ้นมาแล้วมันจะอ่าน“ การตกแต่งข้อความ: ขีดเส้นใต้”ภายในวงเล็บมีเอฟเฟกต์โฮเวอร์ที่แตกต่างกันจำนวนมากที่สามารถสร้างได้สำหรับวัตถุที่แตกต่างกันและแต่ละรายการมีคำสั่งเฉพาะเพื่อสร้างเอฟเฟกต์ แต่กระบวนการนั้นคล้ายกันในกรณีส่วนใหญ่