【jQuery-12】hover()メソッドを使いマウスオーバーで動きを付ける

2021/12/17

PC全般

t f B! P L
今回からはイベントに関するメソッドを見ていきましょう。

hover() メソッドは指定したセレクタにマウスを乗せたときに、引数の内容が命令として呼び出されるものです。

実際に使うシーンが多いメソッドなのでしっかり身に付けましょう!

【hover()】マウスカーソルが乗ったときに動きを付ける

See the Pen hover() by taichi (@taichi_na) on CodePen.

上の例では、それぞれの文章にマウスカーソルが乗ったときにCSSが書き換わるように命令をしてあげています。

hover() は関数を引数として取り、その内容を実行します。

これまで頻繁に登場してきた click() と同じですね。

次の例では、マウスカーソルが指定したセレクタから離れたときにも動きを付ける命令をしています。

See the Pen Untitled by taichi (@taichi_na) on CodePen.

このように、hover 内に二つ目の function() を入れると、マウスカーソルが指定したセレクタから離れたときの動きを命令してくれます。

一行目では色をもとの黒に戻し、二行目では文字の大きさをもとに戻しています。

【mousemove()】マウスカーソルの座標を取得する

See the Pen Untitled by taichi (@taichi_na) on CodePen.

mousemove() というメソッドもwindowをセレクタとして指定をして、マウスが動いた際のイベントを取得します。

ここではX座標とY座標を取得して<p>要素に出力しています。

今回初めて function(e) というものが登場しました。

e はイベントという意味で、今起きていること、と考えていいようです。

e.pageX でX座標を

e.pageY でY座標を

それぞれ取得しています。


1981年生まれ。北海道在住。現在無職でアルバイトをしながらプログラミングを勉強中。木工を長らくしていたのでそちらの知識と技能はあります。ミニマリスト/ヴィーガン/アフリカに4年

カテゴリー別に記事を探す

このブログを検索

Contact

名前

メール *

メッセージ *

QooQ

TOP