Làm nổi bật menu đang hoạt động
Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 39 trên 43.
Thử thách
DễMột menu điều hướng đơn giản có bốn liên kết. Nhiệm vụ của bạn là làm cho menu tương tác hơn bằng cách sử dụng các lớp giả.
Viết CSS để:
- Đổi màu nền của liên kết thành
rgba(50, 168, 82, 1)khi người dùng di chuột lên liên kết. - Đổi màu văn bản thành trắng khi người dùng đang nhấp vào liên kết.
Tự làm thử
<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>
Tất cả bài học trong Thành thạo CSS
1Làm chủ bộ chọn: Kết hợp
Giới thiệuBộ chọn hậu duệBộ chọn conBộ chọn anh em liền kềBộ chọn anh em tổng quátThử thách ôn tập7Xây dựng giao diện với CSS Grid
Cơ bản về GridĐịnh vị phần tử theo hàng của GridCác vùng được đặt tênThử thách ôn tập3Các lớp giả cấu trúc
Các lớp giả cấu trúcChọn phần tử con đầu tiênChọn phần tử con cuối cùngSức mạnh của mẫu: dùng nth-childThử thách ôn tập6Trang đích
Tạo kiểu cho phần đầu trangTạo kiểu cho nútBố cục phầnBố cục thẻThêm các chi tiết hoàn thiện9Thử thách cuối cùng
Làm nổi bật menu đang hoạt độngTô màu xen kẽ các hàng trong bảngHiệu ứng khi di chuột lên nútBố cục thẻ dạng lướiẢnh chính làm mờTự luyện tập: Playground Web