Tailwind'de Hover'da “break-inside” Nasıl Uygulanır?

Bu makale, Tailwind CSS'de fareyle üzerine gelindiğinde 'break-inside' uygulama yöntemini örnekleyecektir.

Tailwind'de Hover'da “break-inside” Nasıl Uygulanır?

Tailwind'de fareyle üzerine gelindiğinde 'break-inside' uygulamak için, HTML programında istenen öğeler üzerinde özel 'break-inside' yardımcı programıyla 'hover' özelliğini kullanın. Ardından, doğrulama için web sayfasını görüntüleyin.

Pratik bir gösteri için, aşağıda listelenen adımları deneyin:

1. Adım: 'İçeri girme' Yardımcı Programıyla Hover Özelliğini Kullanın
Bir HTML programı oluşturun ve “ üzerine gelin İstenen 'break-inside' yardımcı programıyla ' özelliği. Örneğin, hover özelliğini “ ile kullandık. içeriye girme-kaçınma-sütun Vurguluyken

öğesi içinde bir sütun sonunu önlemek için yardımcı program:

Burada:

• “ sütunlar-2 ” sınıfı,
  öğesini iki sütuna bölmek için kullanılır.
• “ bg-sarı-500 ” sınıfı,
  dosyasının arka planına sarı rengi ayarlar.
• “ vurgulu:break-inside-avoid-column

  öğesindeki ” sınıfı, bir fare işaretçisi üzerine geldiğinde,

  öğesi içinde sütun kırılmasından kaçınılması gerektiğini belirtir.

2. Adım: Çıktıyı Doğrulayın
Fareyle üzerine gelindiğinde 'break-inside-avoid-column' yardımcı programının başarılı bir şekilde uygulanıp uygulanmadığını doğrulamak için HTML web sayfasını görüntüleyin:

Yukarıdaki çıktı, kullanıcı istenen öğenin üzerine geldiğinde, öğe içindeki sütun kırılmasının önlendiğini gösterir. Bu, 'break-inside-avoid-column' öğesinin, belirtilen öğeye göre vurgulu öğeye başarıyla uygulandığını gösterir.

Çözüm

Tailwind'de fareyle üzerine gelindiğinde 'içeri girme'yi uygulamak için ' üzerine gelin ”istenilen özellik” hırsızlık ” HTML programında yardımcı program. Hover özelliği herhangi bir öğe ile kullanılabilir. Doğrulama için web sayfasını görüntüleyin. Bu makale, Tailwind CSS'de fareyle üzerine gelindiğinde 'break-inside' uygulama yöntemini açıklamaktadır.