圧倒的なシェアを誇るIE 6 (Internet Explorer 6) では、CSS2で定義されたはずのa要素以外でのhover擬似クラスセレクタに対応してません。で、それを解決する csshover.htc ってスクリプトをWhatever:hoverで配布しているので導入してみた。
hoverはマウスポインタ等が要素の上に乗っかった時に適用される擬似クラス。
hover擬似クラス使用例
例として、id=testのspan要素に：hover擬似クラスを使って、テキストの色を#ff0000に変える場合の表示例とコードを以下に示してみます。
“このテキストの色が変わる”って文字列の上にカーソルを持っていくと、文字の色が赤色に変わる。
表示例:このテキストの色が変わる
コード:
<span id=test>このテキストの色が変わる</span>
span#test:hover { color : #ff0000 ; }こんな感じに:hoverはどの要素にも適応される決まり1 になってるけど、IE6ではリンクアンカーa要素以外の:hoverはサポートされてない。
ちなみに最新のIE7では、:hoverと:activeには対応してるけど、:focus擬似クラスと:before、:after擬似要素には対応していない。2
csshover.htc導入手順
Whatever:hoverで配布されてるcsshover.htcには２つの種類があって、
- :hoverと:activeをIEで適応させるもの (ver1)
- :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部分に導入しました。
<head>
<style type="text/css">
<!--
body { behavior : url ("絶対パス/csshover.htc") ; }
-->
</style>
</head>WordPressではheader.phpに。
僕は適応してるテーマファイル以下にscriptsディレクトリを作って、そこでスクリプトを管理しているので、以下のようにしました。
<style>
body { behavior : url ( "<?php bloginfo('template_directory'); ?>/scripts/csshover.htc" ) ; }
</style>
参照・参考・注釈
csshover.htc導入
jmblog.jp – IEでa要素以外に:hover擬似クラスを適用させる
CSSプロパティ behavior について
?D of K – behaviorに関してのまとめ
- CSS2では動的擬似クラスとしてどの要素にも適応されるよう定義されてる。
Selectors [back] - IE7のCSS対応状況
【特集】正式版完全対応! Internet Explorer 7 CSS攻略法 (MYCOMジャーナル)
【特集】CSS実装徹底検証! そこが知りたいInternet Explorer 7 (MYCOMジャーナル) [back]
Category :
Tags: 
2007-03-20 
by
rui_mashita 