Bu makale, Tailwind CSS'de satır ızgarasına fareyle üzerine gelme efektini uygulama yöntemini gösterecektir.
Tailwind'de Row Grid Üzerinde Hover Nasıl Uygulanır?
Tailwind'de satır kılavuzuna fareyle üzerine gelme efektini uygulamak için bir HTML dosyası oluşturun ve ' üzerine gelin “ ile sınıf ızgara satırları-
Pratik uygulama için verilen-sağlanan adımlara göz atın:
Adım 1: Hover Özelliğini HTML Programında Satır Izgarasıyla Kullanın
Bir HTML programı oluşturun ve “ üzerine gelin ' özelliği ile ' ızgara satırları-
< vücut >
< div sınıf = 'ızgara ızgara-sıraları-3 vurgulu: ızgara-sıraları-5 ızgara-akış-sütun boşluk-3 m-3 metin merkezi' >
< div sınıf = 'bg-teal-500 p-5' > 1 < / div >
< div sınıf = 'bg-teal-500 p-5' > 2 < / div >
< div sınıf = 'bg-teal-500 p-5' > 3 < / div >
< div sınıf = 'bg-teal-500 p-5' > 4 < / div >
< div sınıf = 'bg-teal-500 p-5' > 5 < / div >
< div sınıf = 'bg-teal-500 p-5' > 6 < / div >
< div sınıf = 'bg-teal-500 p-5' > 7 < / div >
< div sınıf = 'bg-teal-500 p-5' > 8 < / div >
< div sınıf = 'bg-teal-500 p-5' > 9 < / div >
< div sınıf = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / vücut >
Burada, üst
- “ Kafes ” sınıfı, bir ızgara düzeni oluşturmak için kullanılır.
- “ ızgara-satırları-3 ” sınıfı, kılavuzun eşit boyutta 3 satıra sahip olması gerektiğini belirtir.
- “ üzerine gelin: ızgara satırları-5 ” sınıfı, bir fare üzerine geldiğinde ızgarayı 5 eşit boyutlu satıra dönüştürür.
- “ grid-flow-col ” sınıfı, ızgara öğelerini yatay olarak sütunlara yerleştirir.
- “ boşluk-3 ” sınıfı, her ızgara öğesi arasında 3 birimlik bir boşluk ayarlar.
- “ m-3 ” sınıfı, ızgara kabının etrafına 3 birimlik bir kenar boşluğu uygular.
- “ metin merkezi ” sınıfı, her ızgara öğesinin metnini merkeze ayarlar.
Alt
- “ ” ızgara öğelerinin sayısını temsil eder.
- “ bg-teal-500 ” sınıfı, deniz mavisi rengini ızgara öğelerinin arka planına ayarlar.
- “ p-5 ” sınıfı, alt
öğelerinin içindeki içeriğe 5 birimlik bir dolgu ekler.2. Adım: Çıktıyı Doğrulayın
Fareyle üzerine gelme efektinin satır ızgarasına uygulandığını doğrulamak için web sayfasını görüntüleyin ve fareyi ızgara öğelerinin üzerine getirin:
Başlangıçta 3 satır olduğu ve fare ile üzerine gelindiğinde satır sayısının 5'e çıktığı görülmektedir. Bu, satır ızgarası üzerinde fareyle üzerine gelme efektinin başarıyla uygulandığını gösterir.
Çözüm
Tailwind'de satır kılavuzuna fareyle üzerine gelme efektini uygulamak için ' üzerine gelin “ ile sınıf grid-rows-
” HTML programında yardımcı program. Fareyle üzerine gelindiğinde satır sayısını değiştirir. Değişiklikleri sağlamak için web HTML sayfasını görüntüleyin ve fareyi ızgara öğelerinin üzerine getirin. Bu makale, Tailwind CSS'de satırlar ızgarasına vurgulu efekti uygulama yöntemini göstermektedir.