.hover()

Định nghĩa và sử dụng

  • .hover() kết hợp xử lý cả 2 sự kiện di chuyển con trỏ chuột vào thành phần (mouseenter) và di chuyển con trỏ chuột ra khỏi thành phần (mouseleave).
  • .hover() được sử dụng trong việc thực hiện một việc gì đó khi hover chuột.

Cấu trúc

.hover(xử lý mouse enter,xử lý mouse leave)

$('p').hover(function(){
        $(this).css('color','red');
    },function(){
        $(this).css('color','black');
});

Bài học chỉ muốn cho bạn hiểu cách sử dụng .hover(), muốn biết chi tiết hơn, bạn có thể xem chi tiết thêm tại phần tham khảo.

.hover(xử lý mouse enter,xử lý mouse leave)

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
  $('p').hover(function(){
    $(this).css('color','red');
  },function(){
    $(this).css('color','black');
  });
});
</script>
</head>

<body>
  <p>Thành phần p</p>
</body>
</html>

Hiển thị trình duyệt:

Làm thử!

Di chuyển con trỏ chuột vào thành phần p để thấy được hiệu ứng.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery - khi hover

<p>Thành phần p</p>

<p style="color: red;">Thành phần p</p>

.click()

.bind()