ＩＥにもマウスオーバー(hover)を適用する方法！ＣＳＳだけで可能！

ＩＥにはクロムやfirefoxみたいにリンクの擬似要素が使えない。


a:hover　⇒　ＩＥ、クロム、firefox　ＯＫ！
p:hover　⇒　ＩＥのみＮＧ！

いろいろ調べたところ、ＣＳＳとjavascriptのみで
実現が出来るということで試してみたらなんとうまくいきました！

----

■HTMLファイル
<p class="list1">あああああ</p>


■ＣＳＳファイル

*html .list1 {
behavior: expression(
(function(el) {
if(typeof(behavior_onMouseEnter) == 'undefined') {
behavior_onMouseEnter = function() {
this.className += ' target-hover1';
};
behavior_onMouseLeave = function() {
this.className = this.className.replace(/target-hover1/, '');
};
}
el.runtimeStyle.behavior = 'none';
el.onmouseenter = behavior_onMouseEnter;
el.onmouseleave = behavior_onMouseLeave;
})(this));
}

.list1 {
font-color:#000;
}
.target-hover1 {
font-color:#F00;
}

----------

list1のところは、通常のＣＳＳを記入。
target-hover1のところは、hoverしたときのＣＳＳを記入。