Menu
CoddyTech
Bắt đầu học

Hoạt ảnh biểu tượng khi di chuột

Bài học 12 trên 12 trong khóa học Dự án thanh điều hướng dưới cùng với HTML/CSS của Coddy.

Hãy thêm hiệu ứng chuyển tiếp cho từng biểu tượng. Để làm vậy, ta sẽ dùng bộ chọn CSS :hover:

challenge icon

Thử thách

Dễ

Để tạo hiệu ứng khi rê chuột lên biểu tượng, bạn có thể thêm đoạn code CSS sau (bạn có thể điều chỉnh màu sắc!):

.navigation ul li:hover {
    color: purple;
    transform: scale(1.2);
    background-color: #fff;
    border-radius: 50%;
}

Vậy là xong! Thanh điều hướng đã sẵn sàng. Bạn có thể rê chuột lên bất kỳ biểu tượng nào trên thanh điều hướng để xem hiệu ứng chuyển tiếp mà bạn đã thêm.

Chúc bạn viết code vui vẻ!

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Viết code HTML ở đây -->
        <script src="script.js"></script>
    </body>
</html>

Tất cả bài học trong Dự án thanh điều hướng dưới cùng với HTML/CSS

1Thanh điều hướng

Thiết lập codemain-containerBài học dự ánThanh điều hướngBài học dự ánDanh sách không thứ tự và tiêu đềBài học dự ánMục danh sách và tiêu đềBài học dự ánThêm biểu tượngBài học dự án

2Phong cách

Thẻ phổ quátBài học dự ánThân trangBài học dự ánTạo kiểu thanh điều hướngBài học dự ánTạo kiểu danh sách không thứ tựBài học dự ánTạo kiểu mục danh sáchBài học dự ánHoạt ảnh biểu tượng khi di chuộtBài học dự án

Tự luyện tập: Playground Web