Hover эффект в Tailwind CSS

На чтение3 мин

Обновлено2 месяца назад

Просмотров

Hover эффект - это визуальное изменение, которое происходит, когда пользователь наводит указатель мыши на элемент веб-страницы. Мы можем добиться эффекта наведения с помощью встроенного в Tailwind CSS модификатора префикса “hover:“.

Простой эффект наведения курсора (изменение цвета фона)

Сначала создайте базовую структуру HTML.
Затем включите ссылку Tailwind CSS CDN в раздел <head>, чтобы применить классы Tailwind CSS.
Внутри <body> добавьте элемент кнопки и примените классы Tailwind для стилизации (например, bg-blue-500, text-white, py-2, px-4, rounded) .
Для эффекта наведения используйте класс «hover:bg-blue-700», чтобы изменить цвет фона при наведении.

Пример: В этом примере показана реализация описанного выше подхода

HTML <!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Simple Hover Effect</title><script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="flex flex-col items-center
             justify-center h-screen bg-gray-100"><h1 class="text-2xl font-bold mb-6 text-green-600">
      Simple Hover Effect
    </h1><button class="bg-blue-500 text-white font-bold 
                   py-2 px-4 rounded hover:bg-blue-700
                   hover:text-gray-200"> 
               Hover me
    </button>
</body>

</html>

Вывод:

Масштабирование при наведении курсора мыши

Сначала создайте базовую HTML-структуру для ваших нужд.
Затем включите ссылку Tailwind CSS CDN в раздел <head>, чтобы применить классы Tailwind CSS.
А внутри <body> добавьте элемент кнопки и примените классы Tailwind для стилизации (например, bg-blue-500, text-white, py-2, px-4, rounded).
Используйте класс «transform» , чтобы разрешить преобразования, и используйте «hover:scale-105» для масштабирования кнопки при наведении. Включите transition, duration-300 и ease-in-out для плавной анимации.

Пример: В этом примере показана реализация описанного выше подхода к объяснению

HTML <!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Scale on Hover</title><script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="flex flex-col items-center
             justify-center h-screen bg-gray-100"><h1 class="text-2xl font-bold mb-6 
               text-green-600">
      Scale on Hover Effect
    </h1><buttonclass="bg-green-500 text-white font-bold
               py-2 px-4 rounded transform hover:scale-105
               transition duration-300 ease-in-out">
        Hover me
    </button>
</body>

</html>

Вывод:

Эффект тени при наведении курсора мыши (тень карты)

Сначала создайте базовую HTML-структуру для ваших нужд.
Затем включите ссылку Tailwind CSS CDN в раздел <head>, чтобы применить классы Tailwind CSS.
А внутри <body> создайте карточку, используя div с классами «max-w-sm», «rounded», «overflow-hidden» и «shadow-lg» . Также добавьте изображение и текстовый контент внутри карточки для привлечения внимания пользователя.
Затем используйте класс « hover:shadow-2xl», чтобы увеличить интенсивность тени при наведении.

Пример: В этом примере показана реализация описанного выше подхода к объяснению

HTML <!DOCTYPE html>
<html lang="en">

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Shadow Effect on Hover</title><script src=
"https://cdn.tailwindcss.com"></script>
</head>

<body class="flex flex-col items-center justify-center
             h-screen bg-gray-100"><h1 class="text-2xl font-bold mb-6
               text-green-600">
      Hover Shadow Effect on Card
    </h1><div class="max-w-sm rounded overflow-hidden 
                shadow-lg hover:shadow-2xl transition
                duration-300 ease-in-out"><img class="w-full"src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230602174859/OpenAI-Python-Tutorial-.webp"alt="Sample Image"><div class="px-6 py-4"><div class="font-bold text-xl mb-2">
              Card Title
            </div><p class="text-green-600 text-base">
                This is a sample card with hover shadow effect.
                Hover over the card to see the effect.
            </p></div></div>
</body>

</html>

Вывод:

#CSS #TailwindCSS