2008年1月20日日曜日

IE7での :hoverによる表示変更について

IE7ではa要素以外についても:hover擬似要素に対応しているが、これについて発生した問題と解決策のメモ。

やったこと
:hoverでcolorを変える

問題点
hover時に該当要素のbackground-colorが無効になる

解決策
:hoverではcolorだけでなく、他のスタイルも一緒に指定する (今回はborder:noneを指定した)

原因の推測
IE7では、hover時のレンダリングにおいてbackground-colorなど一部のスタイル指定について再レンダリングを行わない。そのため、重なる要素にborder等の再レンダリングを行うスタイルがあるとそちらで上書きされてしまう。

参考:
 我流天性 - がらくた屋 » a:hoverでz-indexを変えて重なりの入れ替えをIEにも対応させてみた
 (z-indexでもbackground-colorと同じ問題が発生するようだ)

0 件のコメント:

コメントを投稿