Селекторы, часть 1 / Псевдокласс :hover [12/18]
×

Псевдокласс :hover [12/18]

Некоторые псевдоклассы позволяют выбирать элементы, с которыми взаимодействует пользователь. Сначала познакомимся с псевдоклассом :hover.

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

1. a:hover { ... }
2. tr:hover { ... }
3 .menu-item:hover { ... }

Первый селектор выбирает ссылку, второй строку таблицы, третий элемент с классом menu-item, но только в том случае, если на них наведён курсор мыши.

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


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Псевдокласс :hover</title> <link rel="stylesheet" href="/assets/course7/course-4.css"> </head> <body> <div class="cup-standings"> <h1>Личный зачёт кубка мира</h1> <table> <tr> <th>№</th> <th>Спортсмен</th> <th>Очки</th> </tr> <tr> <td>1.</td> <td>Мартен Фуркад <em>Франция</em></td> <td><strong>151</strong></td> </tr> <tr> <td>2.</td> <td>Эмиль-Хегле Свендсен <em>Норвегия</em></td> <td><strong>121</strong></td> </tr> <tr> <td>3.</td> <td>Алексис Бёф <em>Франция</em></td> <td><strong>110</strong></td> </tr> <tr> <td>4.</td> <td>Арнд Пайффер <em>Германия</em></td> <td><strong>105</strong></td> </tr> <tr> <td>5.</td> <td>Евгений Устюгов <em>Россия</em></td> <td><strong>104</strong></td> </tr> </table> </div> </body> </html>
CSS
table { background: rgba(255, 255, 255, 0.95); } tr:hover { } strong:hover { }
HTML Academy

Усовершенствуйте таблицу результатов, добавив подсветку строк и очков:

  1. В CSS-правило с селектором tr:hover добавьте свойство background-color: #fcf8e3;.
  2. В strong:hover свойство color: #0088cc;.

Наведите курсор мыши на строки таблицы и на очки биатлонистов для проверки работы подсветки.

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.