Hiệu ứng Rê Chuột Trong CSS - Quách Quỳnh
Có thể bạn quan tâm
CSS là ngôn ngữ trang trí với nhiều hiệu ứng hay. Bạn sẽ thường gặp nhất là khi di chuyển chuột vào một liên kết (Link) hay vào một khu vực nào đó. Khi rê chuột qua sẽ thấy xuất hiện đổi màu hoặc xuất hiện các hiệu ứng bắt mắt. Bài viết sau sẽ đề cập tới các vấn đề đó.
Mục Lục
- Đổi màu cho link trong CSS
- a:link
- a:hover
- a:visited
- a:active
- Thay đổi màu nền khi di chuột lên
- Hiệu ứng Hover với button
Đổi màu cho link trong CSS
Bất kỳ một blog, website nào cũng có các liên kết nội. Chúng là các đường link dẫn từ bài này sang bài khác. Vậy làm thế nào để cho link đó thay đỏi màu sắc khi con trỏ chuột đi qua?
a:link
Thuộc tính này sẽ thiết lập màu sắc cho văn bản liên kết. Khi viết trong CSS sẽ như thế này:
a:link {
color: #333333;
}
a:hover
Màu chữ sẽ được thay đổi hoặc xuất hiện hiệu ứng nào đó.
a:hover {
color: red;
text-decoration: under-line;
}
- Text-decoration: under-line là link xuất hiện gạch chân. Nếu không muốn hãy thay under-line thành none
a:visited
Màu chỉ định cho các liên kết bạn đã xem.
a:visited {
color: #000000;
}
a:active
Màu sắc cho liên kết khi nhấp chuột
a:active {
color: #666666;
}
Thay đổi màu nền khi di chuột lên
Khi rê chuột lên một phần tử nào đó màu nền sẽ bị chuyển sang màu khác.
Hiệu ứng Hover với button
Kết luận: Trên đây là một vài hiệu ứng thường sử dụng. Thuộc tính hover sẽ tạo ra sự thay đổi khi con trỏ chuột di chuyển qua. Khi bạn hiểu rõ cách sử dụng sẽ sáng tạo ra nhiều thứ theo ý của mình.
Từ khóa » Code Hiệu ứng Khi Rê Chuột Vào Link
-
Code Tạo Hiệu ứng Khi Rê Chuột Vào đường Link - Tài Liệu Text - 123doc
-
Thay đổi Màu Link Khi Di Chuột Vào - Cáo Đêm
-
Tạo Hiệu ứng Trên đường Link Khi Rê Chuột - Tài Liệu đại Học
-
Hiệu ứng Rê Chuột Trong Css. Hiệu ứng Rê Chuột Vào ảnh
-
Cách Tạo Hiệu ứng Khi Rê Chuột Qua (hover) Bằng CSS
-
Tạo Hiệu ứng Di Chuột (hover) Thú Vị Bằng CSS - NIIT - ICT Hà Nội
-
Hiệu ứng Tự động đổi Màu Khi Rê Chuột Vào Link - ZingTV
-
Hiệu ứng Khi Rê Chuột Vào Link Trong Blog. - Zooz Team
-
Trang Trí Link Trong CSS - Hoclaptrinh
-
Hiệu ứng Phóng To ảnh Khi Rê Chuột Cho Website Và Blogger
-
Cách Tạo Hiệu ứng Khi Rê Chuột Qua ... - Vay Tiền Online Bằng CMND
-
Viết Chức Năng Phóng To Thumbnail Khi Hover Với CSS3 - Freetuts