jQuery hoverマウスと乗せたり外した時動作するイベント
jQuery hoverマウスと乗せたり外した時動作するイベント
hoverはマウスを乗せたり外したりしたときに起動するイベントです。
同じ様な動作をする
mouseenterとmouseleave
mouseoverとmouseout
は一つだけしかそれぞれ実行できません。
なので乗せたり外したりしたい時は2つのイベントが最低必要になります。
hoverイベントは一つで切り替えができるんです。
サンプル
$(function(){
$(“セレクタ”).hover(function(){
処理
}, function(){
処理
});
});
サンプル
<html>
<html>
<head>
<script src=”jquery-3.2.1.js”></script>
<script>
$(function(){
$(“.botton”).hover(function(){
$(“.three”).css(“color”,”red”);
}, 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>
実行結果は
マウスオバーしたら3が赤くなりマウスアウトすると元にもどります。
最初に書く関数がマウスオバーした時の処理で
二つ目に書く関数がマウスアウトした時の処理を書きます。
