a:hoverでz-indexを変えて重なりの入れ替えをIEにも対応させてみた

CSSで、a:hoverによるz-indexを変えてレイヤーの重なりを制御しようとしたのですが、IEにハマりました。特にIE7に。

まず最初に試したのが下記のa:hoverでz-indexを変更する事。
これはFirefox2,Safari等では当たり前に動いてくれます。

[html] a{
position:absolute;
z-index:1;
}
a:hover{
z-index:2;
} [/html]

しかしこれだけだとIEは動きません。
しかもIE5.5,IE6とIE7との挙動が違ってる分、苦労しました。
特にIE7は「a:hover時にz-index以外の別の属性も変更させないとz-indexが反映されない。」に気付く迄随分とハマりました。

これは個人的な予想ですが。

IE7はa:hover時にborder,visibility,background等、表示に関する何かの属性を明示的に変更しなければ、z-indexを反映させた再レンダリングを行ってくれない。
=何か再レンダリングさせればいい。

background:none;
border:none;
visibility: visible;
などのいずれかで、a{}で指定していない属性が無難。

今後、この予想が正しいか検証していく予定です。
実際に動かしてる簡単なサンプルはこちら。
HTMLはシンプルにこんなの。

[html]

[/html]
CSSはこんな風になりました。
コメント部分が大事な所です。
[html]div#test ul{
list-style:none;
position:relative; /* 相対位置基準: a{position:absolute;}の基準位置 */
width:300px;
height:300px;
background:#eef;
overflow:hidden;
}
div#test ul li{
display:inline;
}
div#test ul li a{
display:block;
position:absolute;
width:140px;
height:150px;
z-index:1;
}
div#test ul li#aaa a,
div#test ul li#aaa a:hover{
background:#ccf;
top:10px;
left:10px;
}
div#test ul li#bbb a,
div#test ul li#bbb a:hover{
background:#fcc;
top:50px;
left:100px;
}
div#test ul li a:hover{
position:absolute;
z-index:100;
visibility:visible; /* — For IE7 — */
/*
z-index以外の何かの属性(border,visibility,background等)を
何かしら変化させないとうまくいかない。
a{}で指定していない無難なパラメータを使う事
*/
}

/* — For IE5.5, IE6 — */
* html div#test ul li a{
position:relative;
/* IE6は最初から position:relative; にしてるとa:hoverに z-indexが反映されない模様。
そのため、IE6だけa:hover時にposition:absolute;とする。
当然、位置がずれるため位置調整を行う。
a:hover時にはposition:absoluteと他ブラウザと同じ位置指定になるので、
最初から a, a:hoverと重ねて指定しておくのがコツ。CSSがコンパクトになる。
*/
}
* html div#test ul li#aaa a{
top:10px; /* position:relative; としての相対位置を指定し直す */
left:10px;
}
* html div#test ul li#bbb a{
top:-100px;
left:100px;
}

[/html]

実際に動かしてる簡単なサンプルでは問題無く動いてます。
Aタグ内にIMGを入れて試しましたが、この方法なら大丈夫でした。

もっと楽な方法があるんだろうな、と思いつつもメモ。

(追記)
Eblog: ツールチップ(ポップアップヘルプ)を改良してみた。
こちらの記事でもa:hoverでのz-indexを制御でIEに苦労されてるようでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


*