Skip to content

Instantly share code, notes, and snippets.

@lizhug

lizhug/gist:8ce131b83e436175a76f

Last active August 29, 2015 14:03
Show Gist options
  • Save lizhug/8ce131b83e436175a76f to your computer and use it in GitHub Desktop.
Save lizhug/8ce131b83e436175a76f to your computer and use it in GitHub Desktop.
Download ZIP
The different between mouseleave with mouseout
Raw
gistfile1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>the difference between mouseout with mouseleave in jQuery</title>
<style>
.outbox {
width: 400px;
height: 400px;
border: 1px solid #000;
}
.innerbox {
width: 200px;
height: 200px;
border: 1px solid #f00;
}
td {
border: 1px solid #ddd;
}
</style>
</head>
<body>
<table>
<tbody><tr><td></td><td>mouseleave</td><td>mouseout</td><td>mouseenter</td><td>mouseover</td></tr>
<tr><td>outbox</td><td class="outbox-mouseleave"></td><td class="outbox-mouseout"></td><td class="outbox-mousein"></td><td class="outbox-mouseover"></td></tr>
<tr><td>innerbox</td><td class="innerbox-mouseleave"></td><td class="innerbox-mouseout"></td><td class="innerbox-mousein"></td><td class="innerbox-mouseover"></td></tr>
</tbody></table>
<div class="outbox">outbox
<div class="innerbox">
innerbox
</div>
</div>
</body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(function() {
$(".outbox").on({
mouseout: function() {
$(".outbox-mouseout").text("true");
},
mouseleave: function() {
$(".outbox-mouseleave").text("true");
},
mouseenter: function() {
$(".outbox-mousein").text("true");
},
mouseover: function() {
$(".outbox-mouseover").text("true");
}
});
$(".innerbox").on({
mouseout: function() {
$(".innerbox-mouseout").text("true");
},
mouseleave: function() {
$(".innerbox-mouseleave").text("true");
},
mouseenter: function() {
$(".innerbox-mousein").text("true");
},
mouseover: function() {
$(".innerbox-mouseover").text("true");
}
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment