jQueryの基本(第9回)


■イベント編 #2(mouseover, mouseout)

前回はイベントの初回として、clickイベントとdblclickイベントについて確認しました。
今回はmouseoverイベントとmouseoutイベントを見ていきます。

・$(‘要素’).mouseover(処理) :要素にマウスカーソルが重なったときに処理を実行する。
・$(‘要素’).mouseout(処理) :要素からマウスカーソルが外れたときに処理を実行する。

以下のコードを例に確認しましょう。

<!DOCTYPE html>
<html lang = "jp">
<head>
  <meta charset="utf-8">
  <title>jQueryの基本</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<h2>jQueryの基本(第9回)</h2>

<div id="sample" style="width: 100px;height: 100px;background-color: lime"></div>

<!--ここからjQueryを記述-->
<script>
$('#sample').mouseover(function(){
    $(this).css('background-color','red');
})

$('#sample').mouseout(function(){
    $(this).css('background-color','lime');
})
</script>

</body>
</html>

上記コードをブラウザで表示すると下図のように表示されます。

黄緑の四角にマウスカーソルを重ねたときの結果が下図で、
マウスカーソルを外すとやはり上記画像のように表示されます。

このように、マウスカーソルが重なった場合の処理を簡単に記述することができます。
どこが選択されているのかを視覚的に分かりやすくしたり、単純に表示を切り替えたりと、
様々な用途で使うことができそうなので、是非使ってみましょう!

  • このエントリーをはてなブックマークに追加

PAGE TOP