« 勉強会 | トップページ | 講習でいっぱい »

2008年6月 4日 (水)

IE6で:hover疑似セレクターを使う

テーブルやフォームにカーソルを当てたときに背景色を変える。
そうすると、ユーザーは今どこを見ているのかがわかりやすい。

そんな効果を出すために、ジャバスクリプトを使ってきた。

firefoxなどは:hover疑似セレクターを使えば簡単に実現できる。
しかし、IE6.0は、a以外のタグには:hover疑似セレクターが対応していない。

そんなことで、しばらく「:hover」には興味を示さなかった。

ところが、ふと読んだ雑誌にIE6.0の独自拡張CSSプロパティ「behavior」を使えば
できると書いてあった。

試してみると、確かにできる。

そこでメモしておくことにする。

[1] 「whatever:hover」というサイトから「csshover.htc」を入手する。
    バージョンがあがっているみたいなので、version 2.xをダウンロードして、名前を「csshover.htc」とリネームしておく。

[2] 適当なフォルダに保存しておく。

[3] HTMLのヘッダー部分もしくは外部CSSファイルに次のように記述する。

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

"script/csshover.htc"の部分にはフォルダへの正しいパスを記述する。

これだけである。

あとは、tableタグに適応させるなら、
table tr :hover td { background-color:#cccccc;}
のように指定するだけ。

あるいは、
input focus { background-color:#cccccc;}
というように指定すると
インプットタグにマウスがあたったときには背景色がグレーになる。

focusでもhoverでもどちらでもよいようだが、hoverを指定したときに、アニメーションgifを
使ったら、アニメーションが終了した状態で表示されるので、focusのほうがよいのだそうだ。
ふ~ん。参考になった。

« 勉強会 | トップページ | 講習でいっぱい »

03 アプリケーション」カテゴリの記事