Công cụ chọn CSS:hover chọn một phần tử khi bạn di con trỏ qua phần tử đó. Ví dụ:bạn có thể sử dụng:di chuột để thay đổi màu của liên kết khi bạn di chuột qua liên kết.
Bạn có thể muốn chuyển đổi các kiểu áp dụng cho một phần tử trên trang web của mình khi người dùng di chuột qua phần tử đó.
Đó là nơi xuất hiện của bộ chọn CSS:hover. Bộ chọn:hover cho phép bạn chọn các phần tử khi bạn di chuột qua chúng. Điều này cho phép bạn áp dụng các kiểu khi người dùng di chuột qua phần tử.
Hướng dẫn này sẽ thảo luận, với các ví dụ, khái niệm cơ bản về bộ chọn trong CSS và cách sử dụng bộ chọn CSS:hover. Đến cuối hướng dẫn này, bạn sẽ là chuyên gia trong việc chọn các phần tử mà các kiểu sẽ áp dụng bằng cách sử dụng:hover.
Bộ chọn CSS
Trong CSS, bộ chọn được sử dụng để chọn các phần tử HTML mà bạn muốn áp dụng các kiểu trên một trang web. Bộ chọn cho phép bạn chọn các phần tử tùy thuộc vào id, lớp, nhóm hoặc thuộc tính của chúng, để bạn có thể áp dụng các kiểu nhất định cho các phần tử cụ thể.
Ví dụ:giả sử bạn muốn làm cho tất cả các thẻ
trong tài liệu HTML xuất hiện với nền màu hồng nóng. Bạn có thể làm như vậy bằng cách sử dụng mã này: h1 {
background-color: hotpink;
}
Trong mã này, chúng tôi sử dụng bộ chọn
được sử dụng để chọn tất cả các thẻ trên trang web. Sau đó, được đặt trong dấu ngoặc nhọn, chúng tôi chỉ định kiểu chúng tôi muốn áp dụng cho các thẻ trên trang web. CSS:hover Selector
trên trang web. CSS:hover Selector
Bộ chọn CSS:hover chọn một phần tử khi bạn di chuột qua phần tử đó. :hover có thể được sử dụng trên bất kỳ phần tử CSS nào, nhưng nó thường được sử dụng trên các liên kết. :hover được chỉ định sau tên của phần tử bạn muốn chọn, chẳng hạn như:hover cho một liên kết.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Có một loạt các tình huống mà bạn có thể muốn sử dụng:bộ chọn di chuột. Dưới đây là một số trường hợp sử dụng tiềm năng cho bộ chọn:
- Thay đổi màu sắc của văn bản khi người dùng di chuột qua một dòng văn bản.
- Thay đổi kích thước của hình ảnh khi người dùng di chuột qua hình ảnh đó.
- Thay đổi màu của nút khi người dùng di chuột qua nút.
Trong tất cả các trường hợp sử dụng này, một kiểu cụ thể được áp dụng khi người dùng di chuột qua một phần tử bằng con trỏ của họ.
Cú pháp của:hover selector như sau:
selector:hover {
// CSS rules
} Đây là các thành phần chính của cú pháp:hover:
- bộ chọn là phạm vi các phần tử mà bộ chọn:di chuột sẽ được áp dụng. Vì vậy, nếu bạn muốn:hiệu ứng hover kích hoạt bất cứ khi nào người dùng di chuột qua phần tử
, bạn sẽ chỉ định h3 .
- :di chuột hướng dẫn trình duyệt rằng các kiểu trong quy tắc CSS chỉ nên được áp dụng khi người dùng đang di chuột qua một phần tử nhất định. Phần tử này là bởi bộ chọn tài sản.
- Quy tắc CSS là những kiểu sẽ được áp dụng khi người dùng di chuột qua các phần tử được xác định bởi bộ chọn . Ví dụ:bạn có thể chỉ định kích thước phông chữ cho văn bản hoặc màu nền của thẻ . Hoặc bạn có thể chỉ định bán kính đường viền của trường .
Hãy xem qua một số ví dụ để chứng minh cách bạn với tư cách là nhà phát triển web có thể sử dụng CSS:hover selector.
:hover CSS Ví dụ
Có một số cách sử dụng:bộ chọn di chuột. Dưới đây, chúng tôi sẽ giới thiệu cho các bạn một số trường hợp phổ biến trong đó:bộ chọn di chuột có thể hữu ích.
Hiệu ứng di chuột qua CSS:Thay đổi màu sắc của liên kết
Bộ chọn:hover cho phép chúng tôi thay đổi màu của liên kết khi người dùng di chuột qua liên kết.
Giả sử chúng tôi đang thiết kế một liên kết có chứa văn bản Trang chủ Career Karma và đưa người dùng đến trang Career Karma. Liên kết này được thiết lập để xuất hiện bằng màu xanh nhạt trên trang web của chúng tôi.
Chúng tôi muốn liên kết thay đổi thành màu cam khi người dùng di chuột qua liên kết của họ. Để tạo hiệu ứng này, chúng tôi có thể sử dụng mã sau:
<html> <a href="https://careerkarma.com">Career Karma homepage</a> <html> <style> a { color: lightgreen; } a:hover { color: orange; } <style>
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi. Hãy chia nhỏ mã của chúng ta.
Trong tệp HTML của chúng tôi, chúng tôi xác định một liên kết đến trang chủ Career Karma bằng thẻ . Sau đó, trong mã CSS của chúng tôi, chúng tôi xác định hai quy tắc.
Quy tắc đầu tiên áp dụng cho tất cả các thẻ HTML trên trang web của chúng tôi. Quy tắc của chúng tôi đặt màu văn bản của tất cả các thẻ thành lightgreen sử dụng màu tài sản.
Quy tắc thứ hai thay đổi màu của thẻ trên trang web thành màu cam khi người dùng di chuột qua thẻ . Điều này đạt được bằng cách sử dụng:bộ chọn di chuột.
Vì vậy, khi người dùng di chuột qua văn bản Trang chủ Career Karma , màu của liên kết chuyển thành màu cam.
Hiệu ứng di chuột qua CSS:Hiển thị một khối văn bản
Bộ chọn:hover cũng có thể được sử dụng để hiển thị một khối văn bản khi người dùng di chuột qua một dòng văn bản.
Giả sử chúng ta đang thiết kế một trang Câu hỏi Thường gặp cho trang web Career Karma. Khi người dùng di chuột qua một câu hỏi, một khối văn bản sẽ xuất hiện cùng với câu trả lời cho câu hỏi của họ. Chúng tôi có thể tạo một câu hỏi ví dụ bằng cách sử dụng mã này:
<html> <span>What is Career Karma?</span> <div>Career Karma is a community of peers, mentors, and coaches that will help you land a dream career in tech.</div> <html> <style> div { display: none; background-color: orange; padding: 10px; } span:hover + div { display: block; } <style> nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi. Chúng tôi đã sử dụng thẻ để tạo câu hỏi “ Nghiệp chướng là gì?” xuất hiện trên trang web của chúng tôi. Sau đó, chúng tôi sử dụng thẻ
chứa câu trả lời cho câu hỏi.Trong tệp CSS của chúng tôi, chúng tôi đã sử dụng các kiểu sau cho thẻ
của chúng tôi:- display:none, điều này làm cho thẻ của chúng tôi ẩn.
- background-color:orange, đặt màu nền của thẻ
của chúng tôi thành màu cam.- CSS padding:10px, tạo khoảng cách 10px giữa nội dung của thẻ
và các đường viền của nó.Sau đó, chúng tôi xác định một quy tắc bằng cách sử dụng bộ chọn span:hover + div. Quy tắc này thay đổi kiểu của màn hình quy tắc trong thẻ
của chúng tôi để chặn , làm cho nó xuất hiện. Vì vậy, khi người dùng di chuột qua thẻ của chúng tôi (ký hiệu là span:hover), thẻsẽ hiển thị.Thay đổi hình ảnh:CSS khi di chuột
Một tình huống khác trong đó:bộ chọn hover có thể được sử dụng là để thay đổi hình ảnh trên trang web. Hình ảnh sẽ thay đổi khi người dùng di chuột qua hình ảnh bằng con trỏ máy tính của họ.
Giả sử chúng ta đang thiết kế một trang web cho một quán cà phê địa phương. Khi người dùng di chuột qua hình ảnh kho cà phê trên Giới thiệu của họ trang, một hình ảnh mới sẽ thay thế hình ảnh hiện có. Hình ảnh mới phải là hình ảnh có sẵn của một quán cà phê.
Chúng tôi có thể sử dụng mã sau để thực hiện hiệu ứng di chuột qua hình ảnh:
<html> <img height="750" width="1250" class="aboutImage" /> <html> <style> .aboutImage { background: url("https://images.unsplash.com/photo-1497515114629-f71d768fd07c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1062&q=80"); } .aboutImage:hover { background: url("https://images.unsplash.com/photo-1525610553991-2bede1a236e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"); } <style> nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi. Chúng tôi đã xác định thẻ
tạo ra một hình ảnh có chiều cao 750px x rộng 1250px. Lớp được gán cho thẻ được gọi là aboutImage .
Trong tệp CSS của chúng tôi, chúng tôi đã khai báo hai quy tắc.
Quy tắc đầu tiên đặt hình nền được hiển thị trong phần tử có tên lớp .aboutImage. Chúng tôi sử dụng một bức ảnh gốc về một ly cà phê làm hình nền.
Quy tắc thứ hai, .aboutImage:hover, thay đổi hình nền của phần tử với lớp .aboutImage mà người dùng đang di chuột qua. Hình ảnh mới xuất hiện là hình ảnh có sẵn của một quán cà phê.
Các Công dụng Khác của:Bộ chọn Di chuột
Như chúng ta đã thảo luận trước đó, có một số tình huống trong đó:bộ chọn di chuột có thể hữu ích. Nếu bạn đang tìm kiếm thêm các ví dụ về:công cụ chọn khi di chuột vào hoạt động, chúng tôi khuyên bạn nên xem các hướng dẫn khác về Nghiệp Karma:
- Chuyển đổi CSS:Hướng dẫn về cách tạo các chuyển đổi xuất hiện khi người dùng di chuột qua một phần tử trên trang web.
- Thanh điều hướng CSS:Hướng dẫn cách tạo thanh điều hướng bằng CSS.
- Menu thả xuống CSS:Hướng dẫn cách tạo menu thả xuống bằng CSS.
Bộ chọn di chuột cũng được sử dụng để tạo hiệu ứng di chuột qua nút. Những hiệu ứng này thay đổi giao diện của một nút và kích hoạt hoạt ảnh khi di chuột qua.
Chúng tôi cũng có hướng dẫn về bộ chọn CSS mà bạn có thể đọc để tìm hiểu thêm về các bộ chọn khác.
Kết luận
Bộ chọn CSS:hover cho phép bạn chọn một phần tử khi người dùng di chuột qua phần tử đó bằng con trỏ. Sau khi một phần tử được chọn, bạn có thể áp dụng một nhóm kiểu mới. Chúng được hiển thị cho đến khi người dùng ngừng di chuột qua phần tử bằng con trỏ của họ.
Hướng dẫn này đã thảo luận, với các ví dụ, khái niệm cơ bản về bộ chọn CSS và cách sử dụng:bộ chọn di chuột. Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng:công cụ chọn khi di chuột qua như một chuyên gia CSS!
Để được tư vấn về các tài nguyên, khóa học và sách học CSS hàng đầu, hãy xem hướng dẫn Cách học CSS của chúng tôi.
- background-color:orange, đặt màu nền của thẻ
- display:none, điều này làm cho thẻ