Как применить Hover on Box Decoration Break в Tailwind?

Эта статья продемонстрирует процедуру применения ховера с оформлением окна в Tailwind.

Как применить Hover on Box Decoration Break в Tailwind?

Свойство CSS «box-decoration-break» определяет рендеринг фона, границы и отступов для элемента, когда он занимает несколько строк или столбцов. Чтобы применить эффект наведения к элементам разрыва оформления коробки, необходимо использовать « парить ” и применить любой эффект к элементам.

Ознакомьтесь с приведенными ниже шагами для практической демонстрации:

Шаг 1. Используйте свойство Hover для разрыва оформления окна в HTML-программе

Создайте HTML-программу и используйте любое свойство наведения на элементах разрыва оформления блока. Например, мы применили « hover: коробка-украшение-клон » в элементе «box decor-slice» и « наведение: текст-желтый-500 » в элементе «box-decoration-clone»:

Здесь:

• “ hover: коробка-украшение-клон » применяет эффект «клонирования украшения коробки» при наведении курсора на элемент «украшение коробки».
• “ наведение: текст-желтый-500 » изменяет цвет текста на желтый при наведении курсора на элемент «box-decoration-clone».

Шаг 2: проверьте вывод

Запустите программу HTML, чтобы проверить вывод:

Приведенный выше вывод показывает, что эффект наведения был применен к элементам, в соответствии с которыми он был указан.

Заключение

Tailwind CSS предлагает набор служебных классов для применения эффектов наведения к любому элементу. Чтобы применить наведение курсора к элементам разрыва оформления коробки, используйте « парить ” и укажите эффект в программе HTML. Пользователи могут изменить цвет фона, цвет текста и цвет границы или добавить тень к элементу при наведении. В этой статье объясняется процедура применения зависания с оформлением окна в Tailwind.