Previous Lesson Next Lesson

.hover() trong jQuery

Định nghĩa và sử dụng .hover() trong jQuery

.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).

Cấu trúc .hover() trong jQuery

Đã được thêm vào từ phiên bản 1.0

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

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

Đã được thêm vào từ phiên bản 1.4

.hover(xử lý mouse enter và xử lý mouse leave)

$('li').hover(function(){
        $(this).toggleClass('active');
});

.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="http://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:

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

.hover(xử lý mouse enter và xử lý mouse leave)

Html viết:

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

<body>
<ul>
<li>Thành phần li</li>
<li>Thành phần li</li>
<li>Thành phần li</li>
<li>Thành phần li</li>
<li>Thành phần li</li>
</ul>
</body>
</html>

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

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

Previous Lesson Next Lesson

Preview

Viết câu trả lời

0 Bình luận

bắt đầu chủ đề từ ·

@ ·