CSS Pseudo-Class phù hợp khi người dùng tương tác với một phần tử có thiết bị trỏ, nhưng không nhất thiết phải kích hoạt nó. Nó thường được kích hoạt khi người dùng di chuyển qua một phần tử với con trỏ [con trỏ chuột]. Các kiểu được xác định bởi lớp giả LƯU Ý: Class Pseudo-Class :hover
CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor [mouse pointer].Thử nó
:hover
sẽ được ghi đè bởi bất kỳ lớp giả liên kết liên kết nào tiếp theo [:link
, :visited
hoặc :active
] có ít nhất tính đặc hiệu. Để tạo kiểu liên kết một cách thích hợp, hãy đặt quy tắc :hover
theo quy tắc :link
và :visited
nhưng trước quy tắc :active
, theo định nghĩa của LVHA-order: :link
-:visited
-:hover
-:active
.:hover
có vấn đề trên màn hình cảm ứng. Tùy thuộc vào trình duyệt, lớp giả Pseudo có thể không bao giờ khớp, chỉ khớp trong một lúc sau khi chạm vào một phần tử hoặc tiếp tục khớp ngay cả khi người dùng đã ngừng chạm và cho đến khi người dùng chạm vào phần tử khác. Các nhà phát triển web nên đảm bảo rằng nội dung có thể truy cập được trên các thiết bị có khả năng lơ lửng hạn chế hoặc không tồn tại. The :hover
pseudo-class is problematic on touchscreens. Depending on the browser, the :hover
pseudo-class might never match, match
only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches another element. Web developers should make sure that content is accessible on devices with limited or non-existent hovering capabilities.Cú pháp
Ví dụ
Ví dụ cơ bản
HTML
Try hovering over this link.
CSS
a {
background-color: powderblue;
transition: background-color 0.5s;
}
a:hover {
background-color: gold;
}
Kết quả
Thông số kỹ thuật
HTML Standard # Selector-hover # selector-hover |
Bộ chọn cấp độ 4 # pseudo hover # the-hover-pseudo |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt
Xem thêm
Thí dụ
Liên kết kiểu với các phong cách khác nhau:
a.ex1: di chuột, a.ex1: active {& nbsp; & nbsp; color: red;}
background-color: yellow;
}
Hãy tự mình thử »
a.ex2: di chuột, a.ex2: active {& nbsp; kích thước phông chữ: 150%;}
Di chuột qua một phần tử để hiển thị một phần tử [như một chú giải công cụ]:
Div {& nbsp; & nbsp; display: none;}
Span: di chuột + div {& nbsp; Hiển thị: khối;} The :hover selector can be used on all elements, not only on links.
Hiển thị và ẩn menu "thả xuống" trên chuột di chuột: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
ul {& nbsp; & nbsp; hiển thị: nội tuyến; & nbsp; lề: 0; & nbsp; Padding: 0; & nbsp; chiều rộng: 200px; & nbsp; Hiển thị: Không có;} ul li ul li {& nbsp; Bối cảnh: #555; & nbsp; Hiển thị: Khối; } ul li ul li a {display: block! quan trọng;} ul li ul li: hover {nền: #666;} :hover MUST come after :link and :visited [if they are present] in the CSS definition, in order to be effective!
Các trang liên quan |
Hướng dẫn CSS: Liên kết CSS
Hướng dẫn CSS: Các lớp giả CSS
: Trước và: Sau khi các bộ chọn trong CSS được sử dụng để thêm nội dung trước và sau một phần tử. The: Hover là lớp giả và: trước &: sau khi là các yếu tố giả. Trong CSS, các yếu tố giả được viết sau lớp giả. | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
Chức năng của một con di chuột là gì? In IE there must be declared a for the :hover selector to work on other elements than the element.
Định nghĩa và sử dụng Phương thức di chuột [] chỉ định hai hàm để chạy khi con trỏ chuột di chuyển trên các phần tử đã chọn. Phương pháp này kích hoạt cả các sự kiện Mouseenter và Mouseleave. Lưu ý: Nếu chỉ có một chức năng được chỉ định, nó sẽ được chạy cho cả hai sự kiện của chuột và mouseleave.
Hover có nghĩa là gì trong HTML?
css declarations;
} Demo
Theo định nghĩa nghiêm ngặt, một chiếc Hover HTML là những gì xảy ra khi con trỏ chuột trên màn hình được đặt trên một phần tử trong trang web, kích hoạt một sự kiện di chuột có thể được trả lời bằng mã được đặt bên trong trang web.
Thí dụ
Một lơ lửng trong thiết kế web là gì?
Hiệu ứng Hover là một cách giúp người dùng điều hướng và tương tác với một trang web. Khi người dùng di chuyển chuột qua một khu vực nhất định của màn hình, hiệu ứng di chuột buộc khu vực phải thay đổi màu sắc, hiển thị văn bản hoặc bật lên một hộp thông tin liên quan.
background-color: yellow;
}
Hãy tự mình thử »
Thí dụ
Chọn và tạo kiểu liên kết khi bạn chuột qua nó:
A: Hover {& nbsp; & nbsp; màu nền: màu vàng; }
a:link {
color: green;
}
/ * Liên kết đã truy cập */ a: Đã truy cập {& nbsp; màu xanh lá cây;}
a:visited
{
color: green;
}
/ * Chuột qua liên kết */ a: Hover & nbsp; {& nbsp; màu đỏ;}
a:hover {
color: red;
}
/ * Liên kết đã chọn */ a: Active & nbsp; {& nbsp; & nbsp; color: màu vàng;}
a:active {
color: yellow;
}
Hãy tự mình thử »
Thí dụ
Liên kết kiểu với các phong cách khác nhau:
a.ex1: di chuột, a.ex1: active {& nbsp; & nbsp; color: red;}
color: red;
}
a.ex2: di chuột, a.ex2: active {& nbsp; kích thước phông chữ: 150%;}
font-size: 150%;
}
Hãy tự mình thử »
Thí dụ
Liên kết kiểu với các phong cách khác nhau:
a.ex1: di chuột, a.ex1: active {& nbsp; & nbsp; color: red;}
display: none;
}
a.ex2: di chuột, a.ex2: active {& nbsp; kích thước phông chữ: 150%;}
display: block;
}
Hãy tự mình thử »
Thí dụ
Liên kết kiểu với các phong cách khác nhau:
a.ex1: di chuột, a.ex1: active {& nbsp; & nbsp; color: red;}
display: inline;
margin: 0;
padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul
li ul li {
background: #555;
display: block;
}
ul li ul li a {display:block!important;}
ul li ul li:hover {background: #666;}
Hãy tự mình thử »
Thí dụ
Liên kết kiểu với các phong cách khác nhau:
a.ex1: di chuột, a.ex1: active {& nbsp; & nbsp; color: red;}