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>

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