FirefoxとIEで、aタグ以外に対するhoverの挙動が違う件

HTML 仕事中 CSS

CSSで便利なhoverですが、Firefoxの場合、divだろうがliだろうが何にでも効くようです。
しかしIE〜6ではaタグにしか使えない。
というか、Firefoxばかりしかつかってなかったので、hoverって何にでも効くんだと思ってた。。IE効かなかったのか。
携帯サイトばっか作ってたので気づかなかった。。


で、肝心のIE6は（7はおｋ）

li:hover {
    color: #000;
}

こういうの使えないんですね。aのみ。a:hoverだけ。


でも、IEでもやってるサイトあるような気がする、何処といわれて思いつかないけどたぶん絶対そう。
って思って調べてみたら

http://www.xs4all.nl/~peterned/csshover.html#changes

ここでdownloadできるcsshover.htcっていう、htcファイルをCSSで読み込むと、IEでも可能になる、とのこと。


IEのビヘイビアって機能らしい。英語で書くとbehavior。初めて知りました。
IE使わないからしらねーと言い訳。


こいつを、CSSを呼び出すhtmlファイルの階層において、CSSでbodyに対して

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

とやる。


すると、なんと！！１、　　、、。　　あれ、動かない○|￣|＿


どうやら、htcファイルが何者かを記すために、apache側(httpd.confとか。.htaccessでもおｋ)で、

AddType text/x-component .htc

と追記する必要があった。（レンタルサーバでははじめから設定してある場合もある）
もちろんhttpd.confの何処でもおｋですよ


すると、Firefoxで出来ていたけどIEで出来なかった、はず、のli:hoverとかなんとか:hover動作が動いたのです。
これはびっくり、ビヘイビアー、すげー。IEコンポーネントすげー。


IEコンポーネント、ビヘイビアーとか色々調べてみるとちょっと便利なものが一杯ありました。
でもIEでしか使えない＝あんま意味ないものが大多数な気がしました。。。


ローカルで効かないから制作マシンにapacheとか入れてないとテスト出来ないし、レンタルサーバでは無理なこともありそう。やっぱりIEうぜー


以上Firefox信者がお送りいたしました。