こんにちは。トゥーアールの西畑です。あまりにも忙しかったので2週間ほどお休みしましたが、jQueryによるJavaScript入門 第10回はhoverとeffectの応用を解説いたします。
hoverとeffectの利用方法は、前のエントリーを参考にしてください。
第6回 Effectの制御
第7回 Effectの制御2
第9回 hover
まずはサンプルをご覧ください。
リンクにマウスを乗せると説明がでてきます。
XHTMLはリンクをa要素、説明をstrong要素で記述したリストで構成しています。
<ul> <li><a href="http://blog.webcreativepark.net/">to-R</a><strong>JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信</strong></li> <li><a href="http://css.webcreativepark.net/">CSS TIPS</a><strong>CSSでレイアウトする為のテクニックを中心に紹介しています</strong></li> <li><a href="http://seo.webcreativepark.net/">SEO対策TIPS</a><strong>SEOのTIPSやツールを公開中</strong></li> <li><a href="http://javascript.webcreativepark.net/">JavaScript Library Archive</a><strong>JavaScriptライブラリをまとめたサイトになります</strong></li> </ul> |
こちらがjQueryの命令文です。
$(function(){ $("a+strong").hide(); $("a").hover(function(){ $("+strong",this).show("fast"); },function(){ $("+strong",this).hide("fast"); }) }) |
最初から解説していきます。
$("a+strong").hide(); |
これは最初に隣接セレクタを利用してstrong要素を非表示にしています。
hoverの最初のfunction内にマウスが乗った際の最初の命令を記述します。
$("+strong",this).show("fast"); |
マウスが乗った要素の次にある要素をエフェクトを付けて表示しています。
hover内のfunctionで利用するthisはclickのthisと同じように、命令が実行された要素を指定できます。
同様にhoverの2個目のfunction内マウスが離れた際の命令を記述します。
$("+strong",this).hide("fast"); |
マウスが離れた要素の次にある要素をエフェクトを付けて非表示しています。
これでメニューのリンク先の内容の補足などを簡単に行うことができます。
こんばんは。
この機能（?!）楽しいですね！
ところで、この説明文のバックの緑色を
他の色にしたり、マンガとかでよく見るふき出し枠の画像にするのは…
strongにCSSで設定したらよいのでしょうか？
>茶々○さん
そーですよ。ただeffectを利用するとstrong要素が自動的にブロックレベル要素に変換されているので気をつけてくださいね。