CSS :hover – Hướng Dẫn Sử Dụng

CSS selector :hover chọn element khi bạn hover chuột qua element đó. Ví dụ: dùng :hover đổi màu link khi hover qua link.

Có thể muốn transition style áp dụng cho element khi user hover qua element đó.

Đó là lúc CSS :hover selector xuất hiện. Selector này cho phép select element khi mouse over. Apply style khi user hover qua element.

Tutorial thảo luận cơ bản selector trong CSS và cách dùng :hover với ví dụ. Đọc xong bạn sẽ expert select element apply style dùng :hover.

CSS Selectors

Trong CSS, selector chọn HTML element muốn apply style trên web page. Selector chọn element dựa trên id, class, group, attribute → apply style cụ thể cho element cụ thể.

Ví dụ: muốn tất cả <h1> tag có background hồng đậm:

h1 { background-color: hotpink; }

Dùng selector <h1> chọn tất cả <h1> tag. Curly braces chứa style áp dụng.

CSS :hover Selector

:hover selector chọn element khi hover chuột qua element. Dùng được trên bất kỳ CSS element nào, nhưng phổ biến trên link. :hover viết sau tên element muốn select, ví dụ a:hover cho link.

Nhiều scenario dùng :hover selector. Ít nhất vài use case:

• Đổi màu text khi user hover qua dòng text.
• Đổi kích thước ảnh khi user hover qua ảnh.
• Đổi màu button khi user hover qua button.

Tất cả: style cụ thể apply khi user hover cursor qua element.

Cú pháp :hover:

selector:hover { // CSS rules }

Thành phần chính:

• selector: phạm vi element :hover áp dụng. Muốn trigger khi hover <h3> → chỉ định h3.
• :hover: báo browser style trong rule chỉ apply khi user hover element do selector định nghĩa.
• CSS rules: style apply khi user hover element do selector định nghĩa. Ví dụ: font-size text, background-color <div>, border-radius <input>.

Xem vài ví dụ demo :hover cho web developer.

Ví Dụ :hover CSS

CSS Hover Effect: Đổi Màu Link

:hover cho phép đổi màu link khi user hover qua link.

Giả sử design link text "Career Karma homepage" link đến site Career Karma. Link màu lightgreen.

Muốn link đổi thành orange khi hover. Code:

<html> 
  <a href="https://careerkarma.com">Career Karma homepage</a> 
  <style> 
    a { color: lightgreen; } 
    a:hover { color: orange; } 
  </style>

Bấm Run để xem output.

Phân tích: HTML <a> tag link. CSS 2 rule. Rule 1: all <a> color = lightgreen. Rule 2: a:hover đổi color = orange khi hover. Kết quả: hover text "Career Karma homepage" → link màu cam.

CSS Hover Effect: Hiện Block Text

:hover cũng dùng hiện block text khi hover qua dòng text.

Giả sử design FAQ page Career Karma. Hover qua question → hiện block text trả lời. Code ví dụ:

<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> 
  <style> 
    div { display: none; background-color: orange; padding: 10px; } 
    span:hover + div { display: block; } 
  </style>

Bấm Run để xem output.

<span> tạo question "What is Career Karma?". <div> chứa answer.

CSS cho <div>:

• display: none – ẩn div.
• background-color: orange – nền cam.
• padding: 10px – gap 10px content-border.

Rule span:hover + div: selector adjacent sibling (+) – div ngay sau span. Rule đổi display của div thành block → hiện ra. Hover <span> (span:hover) → <div> visible.

Đổi Ảnh: CSS On Hover

Scenario khác: đổi ảnh khi user hover qua ảnh.

Giả sử website coffee shop local. Hover qua stock image cà phê trang About → ảnh mới thay thế: stock image café.

Code image hover effect:

<html> 
  <img height="750" width="1250" class="aboutImage" /> 
  <style> 
    .aboutImage { background: url("https://images.unsplash.com/photo-1497515114629-f71d768fd07c..."); } 
    .aboutImage:hover { background: url("https://images.unsplash.com/photo-1525610553991-2bede1a236e2..."); } 
  </style>

Bấm Run để xem output.

<img> tag: ảnh 750px x 1250px, class aboutImage. CSS 2 rule. Rule 1: background image cho class .aboutImage (stock photo cà phê). Rule 2: .aboutImage:hover đổi background image element hover (stock photo café).

Các Sử Dụng Khác Của :hover Selector

Như đã nói, nhiều scenario :hover hữu ích. Muốn thêm ví dụ, xem các tutorial Career Karma khác:

• CSS Transition: tạo transition xuất hiện khi hover element.
• CSS Navigation Bar: tạo nav bar dùng CSS.
• CSS Dropdown Menu: tạo dropdown menu dùng CSS.

:hover cũng dùng tạo button hover effect – đổi appearance button, trigger hover animation.