Hiệu ứng :hover trong CSS
Trần Thị Vân - 2318
- 13/07/2025
Chức năng của Hiệu ứng :hover trong CSS
Hiệu ứng :hover trong CSS dùng để tạo ra thay đổi khi người dùng rê chuột vào một thẻ HTML nào đó, giúp cho trải nghiệm người dùng trở nên thực tế hơn và mượt hơn.
Ví dụ Hiệu ứng :hover trong CSS
#hover-width p:hover{
width:100%; /*Hover id để đổi giá trị của thuộc tính width*/
}
#hover-border:hover {
border:5px solid green ;cursor: pointer; /*Hover id để đổi đổi giá trị của thuộc tính border, cursor*/
}
#hover-background:hover{
background:green; cursor: pointer; /*Hover id để đổi giá trị của thuộc tính background*/
}
a:hover {
color:green /* Hover liên kết a để đổi giá trị của thuộc tính color*/
}
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Ví dụ Hiệu ứng :hover trong CSS</title>
<style>
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%;height:auto;padding:20px;border:5px solid red; margin-bottom:10px}
a:hover {color:green}
#hover-background:hover{background:green; cursor: pointer;}
#hover-border:hover {border:5px solid green ;cursor: pointer;}
#hover-width p{width:50%;margin:0px; padding:0px;background:green}
#hover-width p:hover{width:100%;cursor: pointer;}
</style>
</head>
<body>
<h1>Chạy thử Ví dụ Hiệu ứng :hover trong CSS</h1>
<p>Dùng để tạo ra thay đổi khi người dùng rê chuột vào một thẻ HTML nào đó, giúp cho trải nghiệm người dùng trở nên thực tế hơn và mượt hơn:</p>
<div><a href="https://webmoi.vn/chay-thu-vi-du-hieu-ung-hover-trong-css/">:hover liên kết</a></div>
<div id="hover-background">:hover background</div>
<div id="hover-border">:hover border</div>
<div id="hover-width"><p>:hover width</p></div>
</body>
</html>
Các cách tạo hiệu ứng Hover trong CSS
Hiệu ứng Hover trong CSS có thể được xây dựng theo nhiều cách khác nhau tùy vào thành phần cần thay đổi. Với những trường hợp đơn giản, chỉ cần kết hợp :hover với các thuộc tính như màu chữ, màu nền hoặc đường viền. Khi muốn chuyển động tự nhiên hơn, có thể kết hợp thêm transition để kiểm soát quá trình thay đổi.
Thay đổi màu sắc khi Hover
Một trong những cách sử dụng Hover phổ biến nhất là thay đổi màu chữ khi người dùng đưa chuột lên phần tử. Cách này đặc biệt phù hợp với liên kết, nút bấm hoặc các thành phần cần tạo điểm nhấn khi tương tác.
.link {
color: #333;
}
.link:hover {
color: #D3801F;
}
Khi con trỏ di chuyển vào phần tử có class link, màu chữ sẽ chuyển sang màu được thiết lập trong :hover. Cách làm này đơn giản nhưng giúp người dùng nhận biết rõ phần tử đang có thể tương tác.
Tạo hiệu ứng Hover với Background và Border
Ngoài màu chữ, Hover còn có thể thay đổi màu nền và đường viền để tạo sự khác biệt rõ ràng hơn. Đây là cách thường được sử dụng cho nút, thẻ nội dung hoặc các khu vực có khả năng nhấp vào.
.button {
background: #fff;
border: 1px solid #D3801F;
}
.button:hover {
background: #D3801F;
border-color: #D3801F;
}
Khi Hover, phần tử sẽ chuyển sang màu nền mới và giữ đường viền đồng nhất với màu nền. Việc thay đổi nhiều thuộc tính cùng lúc giúp trạng thái tương tác dễ nhận biết mà không cần thêm quá nhiều thành phần trang trí.
Kết hợp Hover với Transition để hiệu ứng mượt hơn
Nếu thay đổi thuộc tính trực tiếp bằng :hover, trạng thái mới thường xuất hiện ngay lập tức. Có thể kết hợp transition để tạo quá trình chuyển đổi mềm mại hơn, giúp giao diện tự nhiên và dễ quan sát.
.button {
background: #fff;
color: #333;
transition: background 0.3s, color 0.3s;
}
.button:hover {
background: #D3801F;
color: #fff;
}
Trong ví dụ trên, các thuộc tính background và color được chuyển đổi trong khoảng thời gian 0,3 giây. Khi kết hợp Hover với Transition, nên chọn thời gian vừa phải để hiệu ứng không quá chậm và vẫn phản hồi nhanh theo thao tác của người dùng.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Hiệu ứng :hover trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
