Hiệu ứng rê chuột
Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 8 trên 43.
Lớp giả :hover cho phép bạn thay đổi kiểu của một phần tử khi người dùng di chuột lên phần tử đó.
Đây là một ví dụ đơn giản, đổi màu chữ khi bạn di chuột qua một nút:
button {
color: black;
}
button:hover {
color: red;
}Trong ví dụ này, chữ trên nút mặc định có màu đen, nhưng khi bạn di chuột qua nút, chữ sẽ chuyển sang màu đỏ.
Thử thách
DễBạn có một nút cần đổi kiểu khi di chuột lên. Nhiệm vụ của bạn là:
- Dùng lớp giả
:hoverđể đổi màu nền của nút thành màu xanh lá khi người dùng di chuột lên nút. - Thêm bóng đổ cho nút khi di chuột lên để tạo cảm giác nút được nâng lên. Dùng
box-shadownhư sau:
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);Lệnh này thêm bóng đổ với độ lệch, độ mờ và màu sắc.
Tự làm thử
<html>
<head>
<title>Hover Effects</title>
<style>
.hover-button {
padding: 10px 20px;
font-size: 16px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
}
/* CSS solution goes here */
</style>
</head>
<body>
<button class="hover-button">Hover over me!</button>
</body>
</html>
Tự kiểm traBài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
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ậpTự luyện tập: Playground Web