Bu makale, Tailwind CSS'de sütun ızgarasına fareyle üzerine gelme efektini uygulama yöntemini gösterecektir.
Tailwind'de Column Grid Üzerinde Hover Nasıl Uygulanır?
Tailwind'de sütun ızgarasına fareyle üzerine gelme efektini uygulamak için bir HTML dosyası oluşturun ve ' üzerine gelin “ ile sınıf grid-cols-
Pratik uygulama için sağlanan adımları izleyin:
Adım 1: Hover Özelliğini HTML Programında Sütun Izgarasıyla Kullanın
Bir HTML programı oluşturun ve “ üzerine gelin ' özelliği ile ' grid-cols-
< vücut >
< div sınıf = 'grid grid-cols-3 vurgulu: grid-cols-5 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.
- “ grid-cols-3 ” sınıfı, kılavuzun eşit boyutta 3 sütuna sahip olması gerektiğini belirtir.
- “ üzerine gelin: ızgara sütunları-5 ” sınıfı, bir fare üzerine geldiğinde kılavuzun 5 eşit boyutlu sütuna dönüştürülmesi gerektiğini belirtir.
- “ 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 sütun ızgarasına uygulandığından emin olmak için web sayfasını görüntüleyin ve fareyi ızgara öğelerinin üzerine getirin:
Fare ızgara öğesinin üzerine geldiğinde sütun sayısının değiştiği görülebilir. Vurgulu efektinin sütun ızgarasında başarıyla uygulandığını gösterir.
Çözüm
Tailwind'de sütun ızgarasına fareyle üzerine gelme efektini uygulamak için ' üzerine gelin “ ile sınıf grid-cols-
” HTML programında yardımcı program. Fareyle üzerine gelindiğinde sütun 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 sütun ızgarası üzerinde fareyle üzerine gelme efektini uygulama yöntemini göstermiştir.