Селекторы, часть 1 / Динамические эффекты с помощью :hover [13/18]
×

Динамические эффекты с помощью :hover [13/18]

Интересовались ли вы, как с помощью CSS создаются выпадающие меню?

Львиная доля динамических эффектов, создаваемых с помощью CSS, опираются на несколько псевдоклассов, главный из которых, конечно же, :hover. Весь секрет заключается в сочетании контекстных селекторов и псевдоклассов. Посмотрите на пример:

li.top ul.submenu {
  display: none;
}

li.top:hover ul.submenu {
  display: block;
}

Первое правило прячет список-подменю. Второе правило гласит: «если на верхний пункт меню, в котором находится подменю, наведут курсор, то надо показать подменю». Вот так всё просто.

Общий принцип такой: родительский элемент реагирует на наведение мыши и изменяет свойства элементов-потомков. То есть всё работает на контекстных селекторах вида селектор1:hover селектор2.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Динамические эффекты с помощью :hover</title> <link rel="stylesheet" href="/assets/course7/course-4.css"> <style> em { display: none; } </style> </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
em { display: none; }
HTML Academy

Теперь в таблице результатов страна спрятана по умолчанию. Нужно сделать так, чтобы при наведении на строку таблицы:

  1. Появлялась страна: свойство display: inline;.
  2. Подсвечивались очки: свойство color: #0088cc;.

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

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

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

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

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

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