Query mouseoverとmouseoutマウスイベントの方法
Query mouseoverマウスを乗せた時のイベントの方法
mouseoverはマウスを要素に乗せた時に発生するイベントです。
サンプル
$(function(){
$(“.セレクタ”).mouseover(function(){
処理
});
});
サンプル
<html>
<head><script src=”jquery-3.2.1.js”></script>
<script>$(function(){
$(“.botton”).mouseover(function(){ $(“.three”).css(“color”,”red”)
});
});
</script>
<title>
</title>
</head>
<body>
<input type=”button” value=”botton” class= “botton” >
<div>
<ul>
<li>1</li>
<li >2</li>
<li class=”three”>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
実行結果hマウスをボタンに乗せた時に3が赤に変わります。
外した時のイベントを書いていないのでi一回乗せると赤のままです。
Query mouseoutマウスをはずした時イベントの方法
mouseoutはマウスを要素に外した時に発生するイベントです。
サンプル
$(function(){
$(“.セレクタ”).mouseout(function(){
処理
});
});
サンプル
$(function(){
$(“.セレクタ”).mouseout(function(){
処理
});
});
サンプル
<html>
<head><script src=”jquery-3.2.1.js”></script>
<script>$(function(){
$(“.botton”).mouseover(function(){
$(“.three”).css(“color”,”red”)
});
$(“.botton”).mouseout(function()
{ $(“.three”).css(“color”,”black”)
});
});
</script>
<title>
</title>
</head>
<body>
<input type=”button” value=”botton” class= “botton” >
<div>
<ul>
<li>1</li>
<li >2</li>
<li class=”three”>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
実行結果は
ボタンに乗せてば赤になり外せば黒になります。
mouseoverとmouseoutのイベントの発生条件は子孫の子要素に乗せてたりはずしたりしても発生します。
