.mouseout()

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

.mouseout(): Ràng buộc một xử lý tới một sự kiện mouseout (di chuyển chuột ra khỏi một thành phần), hoặc kích hoạt sự kiện mouseout lên một thành phần.
Khác biệt giữa mouseout và mouseleave là:
- .mouseout(): Khi di chuyển chuột từ thành phần cha lên thành phần con, mặc dù vẫn trong thành phần cha, nhưng nếu di duyển chuột lên thành phần con thì được tính như là đã thoát khỏi thành phần cha.
- .mouseleave(): Khi di chuyển chuột từ thành phần cha lên thành phần con, thì vẫn được hiểu là đang ở thành phần cha.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<style>
div.out {
width:40%;
height:120px;
margin:0 15px;
background-color:#acaacb;
float:left;
}
div.in {
width:60%;
height:60%;
background-color:#f9f394;
margin:10px auto;
}
p {
line-height:1em;
margin:0;
padding:0;
}
</style>
<script>
$(function(){
     var i = 0;
    $("div.overout").mouseover(function(){
    $("p:first",this).text("mouse over");
    $("p:last",this).text(++i);
    }).mouseout(function(){
    $("p:first",this).text("mouse out");
    });
    var n = 0;
    $("div.enterleave").mouseenter(function(){
    $("p:first",this).text("mouse enter");
    $("p:last",this).text(++n);
    }).mouseleave(function(){
    $("p:first",this).text("mouse leave");
    });
});
</script>
</head>

<body>
<div class="out overout">
<p>move your mouse</p>
<div class="in overout">
<p>move your mouse</p>
<p>0</p>
</div>
<p>0</p>
</div>

<div class="out enterleave">
<p>move your mouse</p>
<div class="in enterleave">
<p>move your mouse</p>
<p>0</p>
</div>
<p>0</p>
</div>
</body>
</html>

Xem ví dụ để hiểu rõ mouseleave và mouseout

Sự khác biệt khi có sự di chuyển lên thành phần con.

Cấu trúc

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

.mouseout()

$('img').mouseout();

.mouseout(function(){...})

$('img').mouseout(function(){
    alert('Bạn vừa di chuyển chuột ra khỏi một thành phần');
});

.mouseout()

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(){
    $('img').mouseout(function(){
        $(this).css('border','5px solid green');
    });
    $('button').click(function(){
        $('img').mouseout()
    });
});
</script>
</head>

<body>
<img src="http://hocwebchuan.com/common/images/img_webstandard.gif" alt="HỌC WEB CHUẨN" />
<button>Click</button>
</body>
</html>

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

Khi click vào button, ta đã kích hoạt được giá trị mouseout vào <img />, giống như vừa di chuyển chuột ra khỏi <img />.

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

Trước khi có jQuery	Sau khi có jQuery
<img src="images/img_webstandard.gif" alt="HỌC WEB CHUẨN" /> <button>Click</button>	<img style="border: 5px solid green;" src="images/img_webstandard.gif" alt="HỌC WEB CHUẨN" /> <button>Click</button>

.mouseout(function(){...})

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(){
    $('img').mouseout(function(){
        $(this).css('border','5px solid green');
    });
});
</script>
</head>

<body>
<img src="http://hocwebchuan.com/common/images/img_webstandard.gif" alt="HỌC WEB CHUẨN" />
</body>
</html>

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

Khi di chuyển chuột ra khỏi <img /> ta sẽ thấy được kết qủa.

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

Trước khi có jQuery	Sau khi có jQuery
<img src="images/img_webstandard.gif" alt="HỌC WEB CHUẨN" />	<img style="border: 5px solid green;" src="images/img_webstandard.gif" alt="HỌC WEB CHUẨN" />

.mousemove()

.mouseover()