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