[IE]IE6でも疑似クラスの :hover を使う方法のまとめ｜CSS擬似要素・擬似クラス｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

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

CSS擬似要素・擬似クラス CSS IE

IE6 IE7.js :hover csshover.htc

スポンサード

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

csshover.htc を利用する

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

csshover.htc のダウンロード

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

Whatever:hover

csshover.htc の使い方

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

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

<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>

<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>

マウスを乗せた際ににクリックできる要素だと分かるように、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

IE7.js の使い方

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

<!--[if lt IE 6]>
<script src="./IE7.js" type="text/javascript"></script>
<![endif]-->

<!--[if lt IE 6]>

<![endif]-->

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

<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>