IEで全ての要素に:hover擬似クラスセレクタを適応させるスクリプト

IEで全ての要素に:hover擬似クラスセレクタを適応させるスクリプト

圧倒的なシェアを誇るIE 6 (Internet Explorer 6) では、CSS2で定義されたはずのa要素以外でのhover擬似クラスセレクタに対応してません。で、それを解決する csshover.htc ってスクリプトを Whatever:hoverで配布しているので導入してみた。
hoverはマウスポインタ等が要素の上に乗っかった時に適用される擬似クラス。

hover擬似クラス使用例

例として、id=testのspan要素に:hover擬似クラスを使って、テキストの色を#ff0000に変える場合の表示例とコードを以下に示してみます。
“このテキストの色が変わる”って文字列の上にカーソルを持っていくと、文字の色が赤色に変わる。

表示例:このテキストの色が変わる

コード:

このテキストの色が変わる


span#test:hover { color : #ff0000 ; }

こんな感じに:hoverはどの要素にも適応される決まり ((CSS2では動的擬似クラスとしてどの要素にも適応されるよう定義されてる。
Selectors)) になってるけど、IE6ではリンクアンカーa要素以外の:hoverはサポートされてない。

ちなみに最新のIE7では、:hoverと:activeには対応してるけど、:focus擬似クラスと:before、:after擬似要素には対応していない。 ((IE7のCSS対応状況
【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (MYCOMジャーナル)
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (MYCOMジャーナル)))

csshover.htc導入手順

Whatever:hoverで配布されてるcsshover.htcには2つの種類があって、

  1. :hoverと:activeをIEで適応させるもの (ver1)
  2. :hoverと:activeと:focusもIEで適応させるもの (ver2)

今回はver1の方 (ver1.42.060206) を導入した。

導入にはbody要素にIE独自のCSSプロパティ behavior を使って、HTCって聞きなれないスクリプトファイルを読み込みだけ。

body { behavior:url("csshover.htc"); }

ただ注意すべきは、 behavior の url にはcssファイルからの相対パスじゃなくて、そのcssファイルを読み込んでる html からの相対パスを書かなくてはいけないって事。なんかややこしいので、僕は絶対パスにしてhead部分に導入しました。

<!--
body { behavior : url ("絶対パス/csshover.htc") ; }
--> 

WordPressではheader.phpに。
僕は適応してるテーマファイル以下にscriptsディレクトリを作って、そこでスクリプトを管理しているので、以下のようにしました。

body { behavior : url ( "<?php bloginfo('template_directory'); ?>/scripts/csshover.htc" ) ; }

参照・参考・注釈

csshover.htc導入
jmblog.jp - IEでa要素以外に:hover擬似クラスを適用させる

CSSプロパティ behavior について
?D of K - behaviorに関してのまとめ