hover
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.
Tính năng media hover trong CSS có thể được dùng để kiểm tra xem cơ chế nhập liệu chính của người dùng có thể hover (di chuột) lên các phần tử hay không.
Cú pháp
Tính năng hover được xác định bởi một trong các giá trị từ khóa dưới đây.
none-
Cơ chế nhập liệu chính không thể hover hoặc không thể hover một cách thuận tiện (ví dụ: nhiều thiết bị di động mô phỏng hover khi người dùng thực hiện thao tác chạm giữ không thuận tiện), hoặc không có cơ chế nhập liệu trỏ chính nào.
hover-
Cơ chế nhập liệu chính có thể hover lên các phần tử một cách thuận tiện.
Ví dụ
HTML
html
<a href="#">Hãy thử hover lên tôi!</a>
CSS
css
/* hiệu ứng hover mặc định */
a:hover {
color: black;
background: yellow;
}
@media (hover: hover) {
/* khi hover được hỗ trợ */
a:hover {
color: white;
background: black;
}
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| Media Queries Level 4 # hover |