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