IE6で :hover を全要素へを適用させる方法

2009年06月08日

a:hover という記述はテキストのロールオーバーが良く使うことがあります。文字色を変えたり下線を消したりと、ユーザーの動きに合わせてデザインを変更することができるため、上手に使うことでユーザビリティの向上が計れます。

しかし、IE6では a要素にしか使えないため、どうしてもIE6のユーザーに対してはユーザビリティが悪くなってしまいます。そんなときに使えるのが csshover.htc というビヘイビアファイルです。これは、IE限定の拡張機能でJscriptを実行するものです。

まずは、csshover.htc を使用していないサンプルを見てください。
このサンプルでは「○要素への :hover」というテキストにカーソルを合わせると文字色が赤になるような設定がされています。

サンプル

a要素への :hover

p要素への :hover

ソース

01<a>a要素での :hover </a><br />
02<p>p要素での :hover </p>
03 
04a,p {
05    margin: 0;
06    padding: 0;
07    color: #0f0;    
08}
09 
10a:hover {
11    color: #f00;
12}
13 
14p:hover {
15    color: #f00;
16}

IE6では「p要素への :hover」にカーソルを合わせても文字色が赤にならなかったと思います。

次に csshover.htc を使用した場合のサンプルです。

サンプル

サンプルページを表示する
※csshover.htcを読み込むと全箇所に適用されてしまうため、あえて別ページを用意しています。

ソース

01<a>a要素での :hover </a><br />
02<p>p要素での :hover </p>
03body {
04    behavior:url(csshover1.htc);
05}
06 
07a,p {
08    margin: 0;
09    padding: 0;
10    color: #0f0;    
11}
12 
13a:hover {
14    color: #f00;
15}
16 
17p:hover {
18    color: #f00;
19}

どうでしょうか。IE6でも「p要素での :hover」にカーソルを合わせて色が変わったと思います。
このようにビヘイビアファイルの読み込み記述を追加するだけで簡単にできるのでおすすめです。

ビヘイビアファイルの読み込み記述の注意点としては、CSSファイルからのパスではなくHTMLファイルからのパスになります。そのため、絶対パスで指定しておくと確実ですね。

a要素以外にも :hover が適用されるようになることで、フォームにカーソルが重なったら背景色を変えるなどして「入力可能な場所」ということを示すなど色々応用できそうです。