บทความนี้จะยกตัวอย่างวิธีการใช้เอฟเฟ็กต์โฮเวอร์กับยูทิลิตีการไหลอัตโนมัติของกริดใน Tailwind CSS
จะใช้การวางเมาส์เหนือ Grid Auto Flow ใน Tailwind ได้อย่างไร
หากต้องการใช้เอฟเฟ็กต์โฮเวอร์กับโฟลว์อัตโนมัติของตารางใน Tailwind ให้สร้างไฟล์ HTML และใช้ปุ่ม ' โฉบ ” คลาสกับ “ ตารางไหล- <คำหลัก> ” ยูทิลิตี้ในโปรแกรม HTML มันเปลี่ยนตำแหน่งของรายการกริดเมื่อวางเมาส์เหนือรายการเหล่านั้น สุดท้าย ดูหน้า HTML ของเว็บและวางเมาส์เหนือรายการกริดเพื่อให้แน่ใจว่ามีการเปลี่ยนแปลง
ดูขั้นตอนที่ให้ไว้สำหรับการนำไปใช้จริง:
ขั้นตอนที่ 1: ใช้ Hover Property กับ Row Grid ในโปรแกรม HTML
สร้างโปรแกรม HTML และใช้ปุ่ม “ โฉบ ” คุณสมบัติที่ต้องการ “ ตารางไหล- <คำหลัก> ' คุณประโยชน์. ตัวอย่างเช่น เราได้ใช้ ' โฮเวอร์: ตารางไหลแถว ” คลาสเพื่อเปลี่ยนตำแหน่งของรายการกริดจากคอลัมน์เป็นแถวเมื่อโฮเวอร์:
< ร่างกาย >
< แผนก ระดับ = 'กริด กริดโฟลว์คอล โฮเวอร์:กริด-โฟลว์-แถว ช่องว่าง-3 ม.-3 ข้อความ-ศูนย์' >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 1 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 2 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 3 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 4 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 5 < / แผนก >
< แผนก ระดับ = 'บีจี-น้า-500 p-5' > 6 < / แผนก >
< / แผนก >
< / ร่างกาย >
ที่นี่:
- “ กริด ” class ตั้งค่าองค์ประกอบเป็นคอนเทนเนอร์กริด
- “ กริดโฟลว์คอล ” กำหนดโฟลว์ของรายการกริดในคอลัมน์
- “ โฮเวอร์: ตารางไหลแถว ” คลาสเปลี่ยนการไหลของรายการกริดเป็นแถวเมื่อเมาส์วางเหนือคอนเทนเนอร์
- “ ช่องว่าง-3 ” เพิ่มช่องว่าง 3 หน่วยระหว่างรายการกริด
- “ ม.3 ” เพิ่มระยะขอบ 3 หน่วยรอบๆ คอนเทนเนอร์กริด
- “ ศูนย์ข้อความ ” จัดเนื้อหาข้อความภายในรายการกริดให้อยู่กึ่งกลาง
ขั้นตอนที่ 2: ตรวจสอบผลลัพธ์
ในการตรวจสอบว่ามีการใช้เอฟเฟ็กต์โฮเวอร์บนโฟลว์อัตโนมัติของกริด ดูหน้าเว็บ และเลื่อนเมาส์ไปเหนือรายการกริด:
สังเกตได้ว่าในตอนแรกโฟลว์ของรายการกริดจะอยู่ในคอลัมน์ และเมื่อเมาส์วางเหนือพวกมัน โฟลว์จะเปลี่ยนเป็นแถว สิ่งนี้บ่งชี้ว่าเอฟเฟกต์โฮเวอร์ถูกนำไปใช้กับโฟลว์อัตโนมัติของกริดสำเร็จแล้ว
บทสรุป
หากต้องการใช้เอฟเฟ็กต์โฮเวอร์บนเส้นตารางอัตโนมัติใน Tailwind ให้ใช้ปุ่ม “ โฉบ ” คลาสที่ต้องการ “ ตารางไหล- <คำหลัก> ” ยูทิลิตี้ในโปรแกรม HTML มันเปลี่ยนตำแหน่งของรายการกริดเมื่อเลื่อนเมาส์ไปเหนือรายการเหล่านั้น เพื่อให้แน่ใจว่ามีการเปลี่ยนแปลง ดูหน้า HTML ของเว็บและวางเมาส์เหนือรายการกริด บทความนี้ได้ยกตัวอย่างวิธีการใช้เอฟเฟ็กต์โฮเวอร์กับยูทิลิตีการไหลอัตโนมัติของกริดใน Tailwind CSS