Nếu bạn muốn thay đổi style css khi người dùng di con trỏ chuột vào một đối tượng nào đó thì hôm nay tôi sẽ chỉ cho bạn một công cụ rất đắc lực chính là hover css. hover css.
Hover selector Css
:hover{
Style Css khi hover
}Đây chính là quy tắc của hover selector . Để giúp bạn nắm rõ hơn bây giờ chúng ta đến với ví dụ.
Ví dụ Hover Css
Ví dụ 1: Thay đổi màu của tiêu đề khi hover
h2{
color: red;
}
h2:hover{
color: orange;
}
Học lập trình web đi làm Unitop.vn
Kết quả ban đầu text có màu đỏ, khi hover chuột vào nó đổi sang màu cam.
Bạn copy vào máy tính chạy để trải nghiệm kết quả nhé.
Ví dụ 2: Hiển thị menu con khi hover chuột vào menu cha.
Giả sử trong website chúng ta có menu đa cấp. Ban đầu chỉ hiển thị cấp một và sau khi di chuột vào menu cha thì menu được hiển thị. Tôi tin rằng bạn đã từng thấy nó nhiều lần khi lướt web.
Vậy chúng ta làm nó thế nào?
Bên dưới chính là code demo cho chức năng trên
ul#main-menu .sub-menu{
display: none;
}
ul#main-menu li:hover .sub-menu{
display: block;
}
- Trang chủ
- Về Unitop
- Khóa học
- Html Css 21 Ngày
- Php Master
- Bootstrap AZ
- Liên hệ
Qua ví vụ này bạn thấy khi sử dụng hover không những tác động trực tiếp vào phần tử đó mà có thể tác động làm thay đổi các phần tử con của nó.
Kết luận
Qua bài viết nay tôi đã hướng dẫn bạn cách sử dụng selector hover trong css. Đây là một phần rất thường xuyên sử dụng trong website nhằm giúp người dùng nhận ra những dấu hiệu để họ biết mình đang tương tác với các phần trên website.
Ngay bây giờ bạn nên dành thời gian để code lại những ví dụ trên để hiểu sâu hơn những gì tôi đã chia sẻ.
Xin chào, sớm hẹn gặp lại!
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.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
Giải bài tập
Phần hover
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ì.
Các thuộc tính mới
Các thuộc tính đã hướng dẫn
Kết quả của bài trước
Mục tiêu bài này
Mục tiêu bài này, hiệu ứng hover với thuộc tính transitionFOLLOW US cũng nằm giữa đường gạch ngang.
Giải bài tập
Phần hover
Phần tiêu đềbackground-color
Các thuộc tính mớimargin-top
Các thuộc tính đã hướng dẫntransition: 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.
Kết quả của bài trước
Mục tiêu bài nàytransiton-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.
Mục tiêu bài này, hiệu ứng hover với thuộc tính transitiontransition-property: width, height. Xác định quá tirn2h chuyển đổi cho các thuộc tính CSS.
Khi trỏ chuột vào:transition-duration: thời gian, Quá trình chuyển đổi mất bao nhiêu thời gian.
+ Các khối icon sẽ đổi sang màu đen.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…
+ 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.
Phần tiêu đề
Các thuộc tính mới display: inline-block để khối vừa có nền ôm sát chữ, vừa hiểu được margin và padding.
Các thuộc tính đã hướng dẫnposition để xác định vị trí của khối so với khối bao bọc bên ngoài.
Kết quả của bài trước
Mục tiêu bài này
Mục tiêu bài này, hiệu ứng hover với thuộc tính transition
Các thuộc tính mới
Các thuộc tính đã hướng dẫn
Kết quả của bài trước
Mục tiêu bài này
Mục tiêu bài này, hiệu ứng hover với thuộc tính transition
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ẻ
+ 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: DownloadDownload
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.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ị.Like, Share nếu thấy bài viết thú vị.
Liên hệ