jQueryオブジェクト１８

jQuery 授業




☆★データーでの確認★☆

マウスののりおりを監視する1 - mouseenter/mouseleave



ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja"><head>
<meta charset="UTF-8">
<title>マウスののりおりを監視する1 - mouseenter/mouseleave</title>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<style>

body {
background-color: #FCF;
}

#div1 {
width: 400px;
height: 300px;
background-color: #FF9;
}

</style>
</head>
<body>

<div id="div1">div!</div>

<script>
$(function() {
$('#div1').mouseenter(function() {
$('#div1').text('マウスのりました');
});
		
$('#div1').mouseleave(function() {
$('#div1').text('マウスおりました');
});
});
</script>

</body>
</html>

ブラウザで表示【 Chrome 】


  • マウスが乗ったとき

  • マウスが降りたとき