- Trang chủ
- Tham khảo
- CSS
- :hover
Nội dung chính
Show
- Định nghĩa và sử dụng
- Cấu trúc
- Trình duyệt hỗ trợ
- Video – Hiệu ứng hover với thuộc tính transition
- Hướng dẫn chi tiết
- Mục tiêu cần đạt
- Giải bài
tập - Phần tiêu đề
- Các thuộc tính mới
- Các thuộc tính đã hướng dẫn
Tóm Tắt
Định nghĩa và sử dụng
“:hover” chọn các liên kết được hover (di chuyển chuột lên thành phần).
Cấu trúc
a:hover {
property : value;
}
Ví dụ
HTML viết:
<html> <head></head> <body> <p><a href="#">Học web chuẩn</a></p> <p><a href="#">Google</a></p> <p><a href="#">vnexpress</a></p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
CSS viết:
a:hover {
background: #ff0000;
color: #fff;
}
Hiển thị trình duyệt khi đã có CSS:
Hover qua link sẽ thấy được hiệu ứng.
Trình duyệt hỗ trợ
“:hover” được hỗ trợ trong đa số các trình duyệt.
Tiếp theo các phần chuẩn bị trong bài 12, mình sẽ hướng dẫn hiệu ứng hover với thuộc tính
transition. Ngoài ra, thuộc tính position cũng được giới thiệu trong bài này.
- Video – Hiệu ứng hover với thuộc tính transition
- Hướng dẫn chi tiết
- Mục tiêu cần đạt
- Giải bài tập
- Phần hover
- Phần tiêu đề
- Các thuộc tính mới
- Các thuộc tính đã hướng dẫn
Video – Hiệu ứng hover với thuộc tính transition
Hướng dẫn chi tiết
Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì.
Mục tiêu cần đạt
Kết quả của bài trước
Mục tiêu bài này
"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn
Khi trỏ chuột vào:
+ Các khối icon sẽ đổi sang màu đen.
+ Vị trị khối được chọn cao hơn các khối khác.
+ Hiệu ứng hover sẽ diễn ra chậm lại.
Ngoài ra, dòng chữ FOLLOW US cũng nằm giữa đường gạch ngang.
Giải bài
tập
Phần hover
+ Thay đổi màu nền bằng background-color
+ Thay đổi vị trị bằng cách giảm margin-top
+ Thay đổi tốc độ, thời gian của hiệu ứng hover bằng thuộc tính mới transition: 0.4s (0.4s là thời gian – 0.4 giây). Thêm transition: 0.4s vào khối icon trước hover và sau hover.
Các bạn cũng có thể tham khảo thêm một số thuộc tính liên quan đến transition
như
+ transiton-deplay: thời gian, Xác định thời gian chờ đợi trước khi các hiệu ứng của quá trình chuyển đổi sẽ bắt đầu.
+ transition-property: width, height. Xác định quá tirn2h chuyển đổi cho các thuộc tính CSS.
+ transition-duration: thời gian, Quá trình chuyển đổi mất bao nhiêu thời gian.
+ transition-timing-function: ease, ease-in, linear, ease-out-ease-in-out. Xác định tiến trình hiệu ứng. Ví dụ, lúc đầu
chậm, lúc sau nhanh…
+ transition trong bài là thuộc tính tổng hợp của những thuộc tính trên. Ví dụ: transition: height 2s ease 3s;
Hướng dẫn chi tiết các bạn xem trong video hướng dẫn nhé.
Phần tiêu đề
+ Dùng thuộc tính display: inline-block để khối vừa có nền ôm sát chữ, vừa hiểu được margin và padding.
+ Dùng thuộc tính position để xác định vị trí của khối so với khối
bao bọc bên ngoài.
position: relative
top: 15px;
lelf: 20px;
Các thuộc tính mới
+ transition: 0.4s;
+ position: relative
top: 15px;
lelf: 20px;
Các thuộc tính đã hướng dẫn
+ float: left (right) dồn các khối
+ overflow: hidden
+ display: block
+ display: inline
+ margin và padding
+ border :
viền, 1px (độ dày) black (màu) solid (loại nét)
+ text-align : canh lề
+ font-size : kích thước.
+ font-weight : bold độ đậm nhạt, giống như thẻ <b></b>
+ font-family : kiểu chữ
+ font-style: italic : tạo chữ in nghiêng
+ float : left, dồn sang một bên
+ text-decoration: none, underline.
+ line-height: 20px: độ giãn dòng.
+ color: (màu chữ) dùng green, red hay mã màu
+ background-color: (màu
nền)black
+ background-image: url(imgage source).
Code mẫu: Download
Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.
Đừng quên Like, Share nếu
thấy bài viết thú vị.
Liên hệ
