- Coding Methodology
- 第24回 a要素以外のマウスオーバーとクリックの設定
第24回 a要素以外のマウスオーバーとクリックの設定
ユーザビリティを考慮したデザインなど、ボックス全体をマウスオーバーで目立たせたりリンクを設定したい場合がよくあります。しかし、IE6 a要素以外のマウスオーバー(:hover)にスタイルを設定しても未対応の為動作しません。今回はjQueryを利用したクロスブラウザ対応のボックス要素のマウスオーバーとクリック動作の設定方法をご紹介いたします。
CSSの様にスクリプトが記述出来るjQuery
jQueryはどの現場でも広く利用されるほどに定着した有名なjavascriptフレームワークです。CSSの様な要素の指定と動作の命令で、簡単に動きを実装する事が出来きる上に、その習得期間も短く、コーダーにとってはなくてはならないフレームワークです。
通常、html上の要素を取得する場合は、document.getElementById('ID名')やdocument.getElementsByTagName('要素名')のような手順が必要ですが、jQueryを利用している場合は、$('#ID名')や $('要素名')の様にとても短く記述できます。また、CSSで要素を指定する様に、$('#gNavi .gnav02 li:first')とスタイルを指定する様に要素を絞り込む事が出来ます。それでは実例に基づいて設定してみましょう。
.hover()の設定
jQueryにはmouseoverとmouseoutを一度に設定できる.hover()イベントがあります。その中のfunction(){},function(){}へは、それぞれmouseoverした時にli.linkboxにクラス属性『li_hover』を付ける（ .addClass() ）設定をし、mouseoutした時には、mouseoverの時に付けたクラス『li_hover』を外す（ .removeClass() ）設定をします。
CSSには、:hover疑似クラスの替わりに.li_hoverクラスを基準にmouseover時のスタイルを定義します。
ここではtext-decoration: ;とbackground-position: ;を指定し、ボックス上のカーソルの指定にcursor:pointer;を設定しています。
.click()の設定
ボックス全体をクリックした時の動作を設定するには、.click()イベントにa要素のhref属性のURLへページ移動する動作を設定します。
$(this).find('a:eq(0)')でli.linkbox要素内の最初のa要素を検索し、.attr('href')で見つかったa要素のhref属性の値を取得しています。
次に、location.hrefにhref属性の値を渡す事で、リンクをクリックした時と同じ様な動きを設定する事ができます。
$(this)
.hover()と.click()のfunctionの中で記述されている、$(this) は$('li.linkbox')や .find('a:eq(0)')で絞り込まれた要素（jQueryオブジェクト）が代入され、$(this).addClass('li_hover')や$(this).attr('href')などで、個別に操作する事ができます。
ページ読み込み時のjQueryの実行
最後に.hover()や.click()で指定した動きをhtml読み込み後に適用する様に$(function(){});で一括りにします。
javascriptの仕様上、実行タイミングが違うだけでエラー発生や意図した結果にならない場合があり注意が必要ですが、この $(function(){}); に括られたスクリプトはjQueryからhtmlが操作可能になる『DOM構築』後に実行されるので安全です。
