.hover() trong jQuery - Quách Quỳnh

Trong CSS thuộc tính hover đã quá quen thuộc. Khi rê chuột vào một phần tử HTML nào đó chẳng hạn như thẻ a thì màu sắc thay đổi. jQuery cũng tương tự nó sẽ dùng .hover() để bắt sự kiện. Nó sẽ bao gồm di con trỏ chuột vào phần tử (mouseenter) và rời chuột khỏi phần tử (mouseleave).

Sự kiện hover trong jQuery được sử dụng cho một số chức năng trên website. Ưu điểm là tạo ra chức năng có độ phức tạp hơn so với CSS. Bài viết sau đây chúng ta sẽ đi tìm hiểu về hover() jQuery cùng cách dùng.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $("h1").hover(function(){
    $(this).css("background-color", "green");
    }, function(){
    $(this).css("background-color", "transparent");
  });
});
</script>
</head>
<body>

<h1>Rê chuột vào đây đi!</p>

</body>
</html>

Như bạn thấy ví dụ trên sẽ có 2 hàm (function). Hàm thứ nhất là khi đưa con chuột vào làm cho background xuất hiện màu xanh. Và hàm thứ hai là khi con trỏ chuột rời đi.

Ví dụ 2:

<script>
jQuery(document).ready(function($){
    $('h1').hover(function(){
        $(this).toggleClass('active');
    });
});
</script>

Tiếp theo bạn hãy thay mã JavaScript và thêm mã CSS vào

<style>
h1.active {
    color: red;
}
</style>

Với mã jQuery phía trên khi bạn dùng phương thức .hover() vào H1 thì nó sẽ dùng .toggleClass để thêm class mới vào là active.

Đọc lại bài viết: Tìm hiểu Classess trong jQuery

Kết luận: Sử dụng .hover jQuery để tạo hiệu ứng rê chuột là giải pháp thay thế cho CSS. Với những chức năng phức tạp hơn hover thông thường. Bài viết này đã đưa ra các ví dụ cụ thể để bạn biết cách sử dụng dễ dàng nhất có thể. Chúc bạn học tốt.