Эффекты наведения

Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 8 из 43.

Псевдокласс :hover позволяет изменять стиль элемента, когда пользователь наводит на него курсор мыши.

Вот простой пример, который меняет цвет текста при наведении курсора на кнопку:

button {
  color: black;
}

button:hover {
  color: red;
}

В этом примере текст кнопки по умолчанию черный, но при наведении на нее курсора текст становится красным.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Задание

Легко

У вас есть кнопка, стиль которой должен меняться при наведении курсора. Ваша задача:

Используйте псевдокласс :hover, чтобы изменить цвет фона кнопки на green, когда пользователь наводит на нее курсор.
Примените тень к кнопке во время эффекта наведения, чтобы она выглядела приподнятой. Используйте box-shadow следующим образом:

box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);

Это добавит тень со смещением, размытием и цветом.

Шпаргалка

Псевдокласс :hover изменяет стиль элемента, когда пользователь наводит на него курсор мыши:

button {
  color: black;
}

button:hover {
  color: red;
}

В этом примере текст кнопки по умолчанию черный, но при наведении на нее курсора текст становится красным.

Попробуйте сами

<html>
<head>
    <title>Hover Effects</title>
    <style>
        .hover-button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
        }
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <button class="hover-button">Hover over me!</button>
</body>
</html>

Проверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.