บทความนี้กล่าวถึงขั้นตอนการใช้งานเพื่อใช้การวางเมาส์เหนือและสถานะอื่นๆ ด้วยคุณสมบัติการมองเห็นโดยใช้ Tailwind CSS
จะใช้โฮเวอร์และสถานะอื่นๆ ด้วยยูทิลิตี้การมองเห็นใน Tailwind ได้อย่างไร
สามารถใช้ยูทิลิตีการมองเห็นพร้อมโฮเวอร์และสถานะอื่นๆ เพื่อทำให้การมองเห็นเปลี่ยนแปลงในการโต้ตอบกับผู้ใช้ มีสามคลาสภายใต้ยูทิลิตี้การมองเห็น ได้แก่ “ มองเห็นได้ ”, “ ล่องหน ', และ ' ทรุด '. มารวมคลาสการมองเห็นบางคลาสเข้ากับสถานะโฮเวอร์ในตัวอย่างด้านล่างเพื่อความเข้าใจที่ดีขึ้น
ตัวอย่างที่ 1: การใช้ Hover State กับคลาส “invisible”
ในกรณีนี้ องค์ประกอบที่เลือกจะถูกซ่อนเมื่อเคอร์เซอร์ของผู้ใช้วางเมาส์เหนือองค์ประกอบ รหัสจะแสดงด้านล่าง:
< ร่างกาย >
< แผนก ระดับ = 'ตารางกริด-cols-3 gap-4 my-4 mx-4' >
< แผนก ระดับ = 'bg-blue-500 p-3 ศูนย์ข้อความแบบโค้งมน' > 01 < / แผนก >
< แผนก ระดับ = 'bg-blue-500 p-3 โฮเวอร์:ศูนย์ข้อความโค้งมนที่มองไม่เห็น' > 02 < / แผนก >
< แผนก ระดับ = 'bg-blue-500 p-3 ศูนย์ข้อความแบบโค้งมน' > 03 < / แผนก >
< / แผนก >
< / ร่างกาย >
คำอธิบายของรหัสด้านบน:
- ขั้นแรก div พาเรนต์จะถูกสร้างขึ้นซึ่งสร้างโครงร่างกริดสามคอลัมน์ที่มีช่องว่างระหว่างแต่ละคอลัมน์และระยะขอบของ ' 4px '. การใช้ Tailwind CSS “ กริด ”, “ กริด-cols-3 ”, “ ช่องว่าง ”, “ ของฉัน ', และ ' ม ” ชั้นเรียนตามลำดับ
- ต่อไปสามลูก” แผนก ” องค์ประกอบถูกสร้างขึ้นและใช้สไตล์พื้นฐานกับองค์ประกอบเหล่านั้น
- จากนั้น “ โฉบ ” สถานะหรือตัวเลือกใน CSS ถูกกำหนดให้กับ “div” ที่สองและ “ ล่องหน ” กำหนดให้คั่นด้วยเครื่องหมายทวิภาค “ : ' เข้าสู่ระบบ. สิ่งนี้ทำให้ div ที่สองมองไม่เห็นเมื่อเมาส์ถูกโฉบเหนือ
ตัวอย่างหน้าเว็บหลังขั้นตอนดำเนินการ:
gif ด้านบนแสดงให้เห็นว่า div ที่สองมองไม่เห็นเมื่อวางเมาส์เหนือ
ตัวอย่างที่ 2: การใช้ Active State กับคลาส “invisible”
สถานะ 'ใช้งานอยู่' จะใช้สไตล์เมื่อผู้ใช้เลือกองค์ประกอบเฉพาะและไม่ได้ออก เช่นเดียวกับกล่องข้อความเมื่อผู้ใช้เริ่มป้อนข้อมูลภายในฟิลด์ ในเวลานี้ฟิลด์จะทำงาน เพื่อทำความเข้าใจที่ชัดเจนยิ่งขึ้นเกี่ยวกับสถานะที่ใช้งานอยู่และวิธีการทำงานกับคลาส 'ล่องหน' โปรดไปที่รหัสด้านล่าง:
< ร่างกาย >< แผนก ระดับ = 'ตารางกริด-cols-3 gap-4 my-4 mx-4' >
< แผนก ระดับ = 'bg-blue-500 p-3 ศูนย์ข้อความแบบโค้งมน' >01< / แผนก >
< แผนก ระดับ = 'bg-blue-500 p-3 ใช้งานอยู่: ศูนย์ข้อความโค้งมนที่มองไม่เห็น' >02< / แผนก >
< แผนก ระดับ = 'bg-blue-500 p-3 ศูนย์ข้อความแบบโค้งมน' >03< / แผนก >
< / แผนก >
< / ร่างกาย >
ในโค้ดข้างต้น คลาสของ “ ล่องหน ” ถูกกำหนดให้กับ “ คล่องแคล่ว ” รัฐที่สอง “ แผนก ” เพื่อทำให้องค์ประกอบ div ที่สองถูกซ่อนเมื่อได้รับเลือก
หลังจากการดำเนินการ ตัวอย่างหน้าเว็บจะปรากฏดังนี้:
ผลลัพธ์ด้านบนแสดงให้เห็นว่าเมื่อเลือก 'div' ตัวที่สอง องค์ประกอบจะมองไม่เห็น
บทสรุป
สามารถใช้โฮเวอร์และสถานะอื่นๆ เช่น ใช้งานอยู่หรือโฟกัสกับคลาสที่มีให้โดยยูทิลิตีการมองเห็นเพื่อปรับเปลี่ยนคุณสมบัติการมองเห็นสำหรับองค์ประกอบที่เลือก ในการเปลี่ยนการมองเห็นขององค์ประกอบต่างๆ บนโฮเวอร์เมาส์ คลาสโฮเวอร์จะถูกใช้ตามคลาสการมองเห็นที่คั่นด้วยสี เช่น “ โฮเวอร์: มองเห็นได้ ' หรือ ' โฮเวอร์: มองไม่เห็น '. บล็อกนี้ได้อธิบายขั้นตอนในการใช้สถานะโฮเวอร์กับยูทิลิตีการมองเห็น