高亮显示当前菜单项

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 39 课，共 43 课。

挑战

简单

这里提供了一个包含四个链接的简单导航菜单。你的任务是使用伪类让它更具交互性。

编写 CSS 来实现以下效果：

当用户将鼠标悬停在链接上时，将链接的背景颜色改为 rgba(50, 168, 82, 1)。
当用户正在点击链接时，将文本颜色改为白色。

亲手试试

<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>