[IE]IE6でも疑似クラスの:hoverを使う方法のまとめ

CSS擬似要素・擬似クラス
スポンサーリンク

IE6 では疑似クラスの :hover が <a> タグ以外では使いないので、IE6対応として「ビヘイビア」と「Javascript のライブラリ」を使って hover をIE6でも利用する方法をまとめてみました。

csshover.htc を利用する

csshover.htc とういHTCファイルを利用する方法です。
IEのビヘイビア機能で .htc ファイルを読み込み、IE6 でも <a> 要素以外で擬似クラス :hover を強引に使えるようにします。

csshover.htc のダウンロード

以下のページより、csshover.htc のファイルをダウンロードします。


csshover.htc の使い方

以下のように :hover でマウスオーバーさせたい要素(li)に csshover.htc を併設します。

.htc ファイル設置の注意点は、別途こちらの記事(IE6、IE7、IE8 でも一部の CSS3 のプロパティが使える「PIE.htc」)も参考にしてみてください。

マウスを乗せた際ににクリックできる要素だと分かるように、cursor:pointer を指定しておきます。

csshover.htc を利用したサンプルは以下に用意しています。
csshover.htc のデモ


IE7.js を利用する

IE6 でも :hover 疑似クラスが使えるなど、IE の HTML/CSS 表示を調整するライブラリ「IE7.js」の記事でも紹介している通り、IE7.js はIE6 でも :hover などの一部擬似クラスが使えるライブラリです。

IE7.js のダウンロード

以下のページより IE7.js の最新版のファイルをダウンロードします。


IE7.js の使い方

<head> 内に IE7.js ファイルを設置します。


あとは普通にマークアップしていくだけです。


IE7.js を使ったサンプルはこちらです。
IE7.js のデモ

コメント

タイトルとURLをコピーしました