mouseoverとは
- ここで説明する mouseover とは次の語句からなるjQueryのメソッドです。
- mouse
- 読み: マウス
意味: 鼠、ここではパソコンの入力位置を指示するポインティングデバイスのこと。 - over
- 読み: オーバー
意味: ～の頭上、～の上をおおう
mouseoverメソッドの概要
このメソッドは、セレクタに該当する既存要素にマウスオーバーイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているマウスオーバーイベントを呼び出します。
マウスオーバーとはブラウザ上でマウスポインターが要素の上に乗っている状態を表します。
構文
サンプルを見る前に構文を確認しておきます。
Selector.mouseover(Handler(EventObject));
Selector.mouseover([EventData], Handler(EventObject));
Selector.mouseover();
- 01: マウスオーバーイベントが発生した時点でハンドラーが実行されます。
- 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
- 03: セレクタにバインドしているマウスオーバーイベントを呼び出します。
サンプルコードと実行結果
ここでは、div 要素にマウスオーバーとマウスアウトのイベントをバインドします。 要素にマウスポインタが重なると 関数処理として、addClass() より class属性を追加します。 逆にマウスポインタが要素の上から外れると 関数処理として、removeClass() より class属性を削除します。
要素は、class属性の有無により CSS で設定しているスタイルが遷移するので外観の変化が見られます。
なお、ここで実装している処理自体は CSS の :hover 疑似クラスを使っても同じことができます。
また、ここでは構文の全ての記法をサンプルとして扱っていません。その理解については、 click() のページを参照してください。
サンプルコード: CSS
<style>
div{
border: thin solid currentColor;
height: 150px;
width: 150px;
text-align: center;
padding: 1em;
transition: all 0.5s 0s ease;
background-color: ##lightpink;
border-radius: 0;
transform: rotate(0deg);
}
div.trans{
transition: all 0.5s 0s ease;
background-color: ##lightcoral;
border-radius: 50%;
transform: rotate(360deg);
}
</style>
- 02: div (セレクターに div 要素を指定して、スタイルを設定しています。)
- 14: div.trans (class="trans" が付いた div 要素をセレクターに指定して、スタイルを設定しています。初期の div 要素には class属性は付いていませんので、jQuery で追加することになります。)
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div>Element DIV</div>
<script>...</script>
</body>
- 06: div (class 属性無しの div 要素です。ここでは、この要素に jQuery を使って class を付けたり、消したりします。)
サンプルコード: script
<script>
$("div").mouseover(function(){
$(this).addClass("trans");
}).mouseout(function(){
$(this).removeClass("trans");
});
</script>
- 02-04: mouseover(handler) (ここでマウスオーバーイベントをバインドします。ハンドラーには関数を指定しています。実行される処理は 03行目のコードです。)
- 03: addClass("trans") (class属性を追加するメソッドです。class名は trans です。)
- 04-06: mouseout(handler) (ここでマウスアウトイベントをバインドします。ハンドラーには関数を指定しています。実行される処理は 05行目のコードです。)
- 05: removeClass("trans") (class属性を削除するメソッドです。)
Element DIV