pseudo-class :hover, :focus và :active trong CSS áp dụng khi nào?

pseudo-class trong CSS là một từ khóa dùng để chỉ định trạng thái của phần tử đã chọn. Ví dụ: :hover được kích hoạt khi người dùng di chuột vào một phần tử, chẳng hạn như button và chúng ta có thể style cho button này khi nó được hover.

/* style sẽ được apply cho bất kỳ button nào mà con trỏ của người dùng đang di chuột qua */

button:hover {
   color: blue;
}

:hover, :focus và :active là những pseudo-class. Chúng tương ứng với một thời điểm cụ thể về cách người dùng sẽ tương tác với phần tử chẳng hạn như link, button hoặc input trên trang.

Những pseudo-class này hoạt động khác nhau tùy thuộc vào việc người dùng đang tương tác với phần tử bằng chuột 🖱, bàn phím ⌨️ hay màn hình cảm ứng 📱, điều này có thể khiến chúng ta khó biết thời điểm để style phù hợp. Chúng ta sẽ cùng tìm hiểu khi nào thì :hover, :focus và :active được áp dụng nhé.

Khi nào :hover được áp dụng

Như mình đã nói ở trên, pseudo-class :hover áp dụng khi con trỏ tương tác với phần tử mà không nhất thiết phải click vào phần tử đó. Ví dụ điển hình đó là khi chúng ta di chuột 🖱 qua một phần tử. Nếu thử di chuột qua button bên dưới, các bạn sẽ thấy button chuyển màu.

Chúng ta sẽ đổi màu cho button khi di chuyển qua button bằng cách:

button:hover { background-color: #a1a1ff; }

Các bạn thử hover vào button dưới đây và xem kết quả nhé:

Đối với khi sử dụng thiết bị di động 📱, về cơ bản chúng ta chỉ tương tác lên phần tử bằng cách chạm hoặc nhấp vào nó. Khi tương tác bằng thiết bị di động, chúng ta cũng sẽ thấy :focus và :active được kích hoạt.

Khi sử dụng bàn phím ⌨️, hover: sẽ không được kích hoạt. Vì nó không được xem là sử dụng con trỏ tương tác lên phần tử.

Khi nào :focus được áp dụng

Khi sử dụng chuột 🖱, pseudo-class :focus được áp dụng khi người dùng nhấp lên phần tử và quan trọng là nó sẽ tiếp tục giữ trạng thái này cho đến khi người dùng nhấp vào phần tử khác.

Nếu bạn nhấp vào button bên dưới bằng chuột, button này chuyển màu khi bạn tương tác nhấp chuột. Button sẽ chỉ trở lại trạng thái mặc định của nó nếu bạn nhấp vào một nơi khác trên trang.

button:focus { background-color: #a1a1ff; }

Click vào đây nha 🙋‍♂️

Khi sử dụng bàn phím ⌨️, việc focus vào một phần tử khá giống với việc hover qua phần tử như khi sử dụng chuột. Các bạn có thể tưởng tượng pseudo-class :focus giống như việc bạn hover vào phần tử bằng bàn phím ^^.

Đối với khi sử dụng màn hình cảm ứng 📱, :focus sẽ được áp dụng khi người dùng chạm vào phần tử. Tuy nhiên điều này không áp dụng khi sử dụng trên trình duyệt Safari bằng di động.

Khi nào :active được áp dụng

Cuối cùng, pseudo-class :active áp dụng trong khoảng thời gian mà phần tử đang được kích hoạt. Ví dụ: nếu sử dụng chuột 🖱, đó sẽ là khoảng thời gian khi chúng ta nhấn nút chuột đến khi nó được thả ra.

Nếu bạn nhấn vào chuột và giữ nguyên khoảng vài giây sau đó thả ra, chúng ta sẽ thấy màu button sẽ thay đổi trong khoảng thời gian này.

button:active { background-color: #a1a1ff; }

Click vào đây nha 🙋‍

:active hoạt động tương tự đối với các tương tác chuột và bàn phím.

Trên thiết bị di động 📱, giống như :focus, :active áp dụng khi nhấn vào phần tử. Và nó cũng không áp dụng với trình duyệt Safari khi sử dụng thiết bị di động.

Thứ tự :hover, :focus, và :active

Thứ tự mà chúng ta thêm style cho các trạng thái này cũng rất quan trọng. Chúng ta cùng xem màu của button sau khi style cho pseudo-class theo thứ tự:

button:active {
  background-color: yellow;
}

button:focus {
  background-color: blue;
}

button:hover {
  background-color: red;
}

Thử hover, focus, và active

Khi nhấn giữ chuột trên button, chúng ta sẽ thấy button có màu đỏ. Lý do là vì cả 3 sự kiện đều được áp dụng khi chúng ta nhấn giữ chuột vào button và không di chuyển chuột ra ngoài nó. Style của :hover được định nghĩa cuối cùng nên lúc này CSS sẽ sử dụng style này.

Để xử lý vấn đề này, chúng ta nên thay đổi thứ tự style cho pseudo-class để CSS áp dụng style cho chính xác.

Thứ tự đúng hơn sẽ là:

button:hover {
  background-color: red;
}

button:focus {
  background-color: blue;
}

button:active {
  background-color: yellow;
}

Thử hover, focus, và active

Dưới đây là bảng tóm tắt về pseudo-class :hover, :focus, và :active:

* không áp dụng cho trình duyệt Safari khi sử dụng thiết bị di động.