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」)も参考にしてみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> ul.nav li { border:1px solid #ddd; cursor:pointer; padding:10px; position:relative; behavior:url(./csshover.htc); } ul.nav li:hover { color:#fff; background:#dd0000; } </style> <ul class="nav"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> </ul> |
マウスを乗せた際ににクリックできる要素だと分かるように、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 ファイルを設置します。
1 2 3 |
<!--[if lt IE 6]> <script src="./IE7.js" type="text/javascript"></script> <![endif]--> |
あとは普通にマークアップしていくだけです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> ul.nav li { border:1px solid #ddd; cursor:pointer; padding:10px; } ul.nav li:hover { color:#fff; background:#dd0000; } </style> <ul class="nav"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> </ul> |
IE7.js を使ったサンプルはこちらです。
IE7.js のデモ
コメント