今回からはイベントに関するメソッドを見ていきましょう。
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座標を
それぞれ取得しています。
