• コーディング ファクトリーHOME
  • Coding Methodology
  • 第24回 a要素以外のマウスオーバーとクリックの設定

コーディングメソドロジー

第24回 a要素以外のマウスオーバーとクリックの設定

ユーザビリティを考慮したデザインなど、ボックス全体をマウスオーバーで目立たせたりリンクを設定したい場合がよくあります。しかし、IE6 a要素以外のマウスオーバー(:hover)にスタイルを設定しても未対応の為動作しません。今回はjQueryを利用したクロスブラウザ対応のボックス要素のマウスオーバーとクリック動作の設定方法をご紹介いたします。

CSSの様にスクリプトが記述出来るjQuery

jQueryを利用

jQueryはどの現場でも広く利用されるほどに定着した有名なjavascriptフレームワークです。CSSの様な要素の指定と動作の命令で、簡単に動きを実装する事が出来きる上に、その習得期間も短く、コーダーにとってはなくてはならないフレームワークです。

通常、html上の要素を取得する場合は、document.getElementById('ID名')やdocument.getElementsByTagName('要素名')のような手順が必要ですが、jQueryを利用している場合は、$('#ID名')や $('要素名')の様にとても短く記述できます。また、CSSで要素を指定する様に、$('#gNavi .gnav02 li:first')とスタイルを指定する様に要素を絞り込む事が出来ます。それでは実例に基づいて設定してみましょう。

.hover()の設定

.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()の設定

ボックス全体をクリックした時の動作を設定するには、.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の実行

jQueryの実行

最後に.hover()や.click()で指定した動きをhtml読み込み後に適用する様に$(function(){});で一括りにします。
javascriptの仕様上、実行タイミングが違うだけでエラー発生や意図した結果にならない場合があり注意が必要ですが、この $(function(){}); に括られたスクリプトはjQueryからhtmlが操作可能になる『DOM構築』後に実行されるので安全です。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム