アクティブメニューのハイライト
CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 39/43。
チャレンジ
簡単4つのリンクを持つシンプルなナビゲーションメニューが用意されています。あなたのタスクは、疑似クラスを使用して、これをよりインタラクティブにすることです。
以下の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>