【jQuery-12】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座標を

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