Интересовались ли вы, как с помощью CSS создаются выпадающие меню?
Львиная доля динамических эффектов, создаваемых с помощью CSS, опираются на несколько псевдоклассов, главный из которых, конечно же, :hover
. Весь секрет заключается в сочетании контекстных селекторов и псевдоклассов. Посмотрите на пример:
li.top ul.submenu { display: none; } li.top:hover ul.submenu { display: block; }
Первое правило прячет список-подменю. Второе правило гласит: «если на верхний пункт меню, в котором находится подменю, наведут курсор, то надо показать подменю». Вот так всё просто.
Общий принцип такой: родительский элемент реагирует на наведение мыши и изменяет свойства элементов-потомков. То есть всё работает на контекстных селекторах вида селектор1:hover селектор2
.
Теперь в таблице результатов страна спрятана по умолчанию. Нужно сделать так, чтобы при наведении на строку таблицы:
display: inline;
.color: #0088cc;
.Наведите курсор мыши на строки таблицы для проверки работы селекторов.
Обсуждение и комментарии
Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.
Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.