WebデザイナーのためのjQuery実践講座

jQueryで「マウスオーバー効果」を実装する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryを使って、実際に「マウスオーバー効果」を実装する方法について、解説致します。
講師:
05:15

字幕

このレッスンでは jQuery を使って 実際にマウスオーバー効果を― 実装する方法について解説していきます まずは ダウンロードしてきたこちらの mouseover-js という フォルダーの中に入っている この index.html ファイルと そして こちらの js フォルダーの中に入っている この javascript.js ファイルを エディッターで開いてください そして これがそれらの ファイルを開いた状態です 左側には index.html ファイル そして 右側には― javascript.js ファイルを 表示させている状態となります これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう まずは 前回までのレッスンのおさらいです 前回のレッスンでは こちらの部分ですね こちらの部分で ウェブサイトの ヘッダー部分と そして― こちらのナビゲーション部分の HTML の作成及び― CSS の作成を行ってきました 今回は 実際にこちらの部分に対して jQuery を使って― マウスオーバー効果を付けていきます 因みに 今回は これまでのレッスンで使っていた jKit プラグインは利用しません 純粋に jQuery の機能だけで― 実装していきます それでは こちらの画面に目を移して頂いて― そしてこちらの部分にご注目ください こちらの部分で 実際に jQuery を使って― マウスオーバー効果を実装しています こちらの部分では 大きく分けて 二つの要素で構成されています まずは こちらの部分 こちらの部分では マウスが 要素に乗った時の処理を記述しています そして こちらの部分では マウスが その要素から離れた時の処理を実装しています それでは 順番に上から見ていきましょう まず マウスが要素に乗った時の処理です まずは $ ( ) そして その括弧の中に― マウスオーバー効果を付けたい 要素を指定してあげます 今回は ヘッダータグの中の ナビゲーションタグの中の a タグ― という形になっていますね 要するに こちらの部分となります こちらの全ての a タグに対して という意味になります そして .on と書いて こちらに mouseenter と書いています このようにすることで マウスがその要素に乗った時― というマウスイベントを 登録する事ができる訳ですね そして その後に function と書いて― そして こちらの波括弧の間にその要素に マウスカーソルが乗った時の処理を書きます それでは その処理について 具体的に見ていきます まず $this と書いていますね この this というのは 要するに これのことを指します a タグのことですね その a タグの .css CSS を コントロールするという意味です そして その CSS の括弧の中には まず 第 1 引数に― color と書いていますね CSS のカラープロパティを第 2 引き数 このカラー コードに変更する という意味になります 今回は こちらの色はピンク色となります これで処理は完了です まとめますと ヘッダータグの中にある ナビゲーションタグの中の― a タグにマウスカーソルが乗った時― その a タグの中の文字列の色を 変えるという意味になります では 次にこちらの部分を見てみましょう こちらの部分は その逆を行っていきます 要するに マウスカーソルがその要素から 離れた時 という意味ですね おおよその書き方は 上で書いた書き方とほとんど同じですが 違うところはというと こちらの部分です こちらには mouseleave と 書いていますね この mouseleave は 先ほどの mouseenter の逆の意味です 要素からマウスカーソルが 離れたときのことを指します そして こちらの具体的な処理の部分 こちらの部分もほとんど同じですね 最後のこちらのカラー コードだけが 異なっています これは黒ですね 要するに まとめますと その a タグから マウスカーソルが離れたとき― その a タグに含まれる文字列の色を 黒にする という意味になります これでマウスオーバー効果の実装は完了です それでは この状態で index.html ファイルを― ブラウザで開いて確認してみましょう はい これがその index.html ファイルをブラウザで開いた状態です それでは こちらのメニュー部分に マウスカーソルを乗せてみましょう すると このようにマウスカーソルを乗せると 文字列の色がピンクに変わりましたね そして マウスカーソルを離すと このように黒色になりました 残りのメニュー部分も同じですね このようにマウスオーバー効果が付いています このように動作すれば きちんと jQuery でマウスオーバー効果を― 付与できている といった形になります 以上でレッスンは終了です 今回は jQueryを使って実際に マウスオーバー効果を実装する方法について― 解説いたしました 以降のレッスンからは jQuery と jKit プラグインを使って― スムーズスクロール効果を実装する 方法について解説していきますので― そちらも合わせてご覧ください

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

2時間04分 (34 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。