Подсветка активного пункта меню
Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 39 из 43.
Задание
ЛегкоДано простое навигационное меню с четырьмя ссылками. Ваша задача — сделать его более интерактивным с помощью псевдоклассов.
Напишите CSS, чтобы:
- Изменить цвет фона ссылки при наведении на нее курсора на
rgba(50, 168, 82, 1). - Изменить цвет текста на white, когда на ссылку активно нажимают.
Попробуйте сами
<html>
<head>
<title>Highlight Active Menu</title>
<style>
nav a {
padding: 10px;
text-decoration: none;
color: black;
}
/* Add your styles here */
</style>
</head>
<body>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#" class="active">Blog</a>
<a href="#">Contact</a>
</nav>
</body>
</html>
Все уроки раздела CSS Mastery
1Мастерство селекторов — Комбинации
ВведениеСелектор потомковДочерний селекторСмежный селекторОбщий родственный селекторИтоговое испытание4Проект: Выпадающее меню
Добавление подменюОтображение подменюДополнительная стилизацияПоле ввода и кнопка2Интерактивные псевдоклассы
ПсевдоклассыЭффекты наведенияЭффекты фокусаАктивные стилиИтоговое испытание3Структурные псевдоклассы
Структурные псевдоклассыВыбор первого дочернего элементаВыбор последнего дочернего элементаСила шаблонов: использование nth-childЗадание на повторение9Финальные испытания
Подсветка активного пункта менюЧередование строк таблицыЭффект наведения на кнопкуСетка карточекРазмытое Hero-изображение