メンバー紹介ページを充実させよう

メンバー紹介ページのプロフィール欄に下記項目が追加されました。メンバー紹介
各自のプロフィール欄に追加記入してください。

• TwitterやFacebookのA/Cを公開して個人的に連絡を取ってもらって構わない、というメンバーは、そのIDを入力して下さい。
• WAVE在校時の校舎名、取得コースなどの学習履歴
• 職業に関する事。会社名、担当名、立場、役割、生き方など

サムネイルにホバーすると大画像が変わるようにするには？

ジェイ子さんの2013-7-26 勉強会のリクエストより。

質問

通販サイトの商品の詳細説明のページで、大きい画像とその下に小さい画像が並び、小さい画像にオンマウスすると大きい画像が表示されます。
どうやって作れば良いですか?

回答

がんばって作る！というのは半分冗談ですが、半分本当です。以下を参考に自分でやってみましょう。

jQueryで作る場合

以下にjQueryで作った解説とDemoがあります。プラグイン版も配布して下さっています。
jQueryでサムネイル画像をマウスオーバーするとメイン画像が入れ替わるスクリプトを書いてみた

CSSだけで作る場合

タカハシ先生がcodepenで作りました。

See the Pen Pure css thumbnails hover by keisuke Takahashi (@ksksoft) on CodePen

下の1,2,3にマウスをホバーすると、上の大きな要素が変化します。

cssの補足

:hover疑似クラス

hoverといえばaタグ（リンク）ですが、divでもpでもどんな要素でも利用できます。ただしIE6はダメです。

隣接兄弟セレクタ

cssセレクタで、要素と要素の間に+を書きます。例えば、
li span:hover + div
と書くと、
li の子孫要素である span にhoverしたの、直後に出てくる div
という意味になります。

「nth-child」と「nth-of-type」

うまく使うとマークアップの要素内にクラス指定していた装飾用のクラスを書かずに済みます。くわしくは以下を参照して下さい。とても分かり易くまとめられています。
cssセレクタおさらい「nth-child」と「nth-of-type」の使い方と違い