CSSの画像置換でロールオーバー

2006年10月4日

CSSでロールオーバーする際の画像のチラつき防止対策

CSSのbackgroundとa:hoverを利用してロールオーバーを作ると背景のaタグを入れる親ノードのbackgoundにも背景を入れておかないとhover時に読み込みが追いつかずに画面上で何も背景が読み込まれない状態ができてしまいチラチラしてしまいます。

そこでCSSでロールオーバーする際の画像のチラつき防止対策を2つご紹介します。

background:none !important;でhover時に背景を消す方法

• メリット：ソースコードが少なくすむのでスマート
• デメリット：!importantはユーザースタイルシート操作するのでユーザビリティー的にお勧めはしない(硬いですけどねｗ)

div#side ul#sideMenu li#sideMenuButton {
background:url(../../images/menubutton_hover.gif);
}
div#side ul#sideMenu li#sideMenuButton a{
display:block;
width:200px;
height:50px;
background:url(../../images/menubutton.gif);
outline:none;
}
div#side ul#sideMenu li#sideMenuButton a:hover {
background:none !important;
}

a:hover時にロールオーバーの画像を被せる方法

• メリット：特に無し
• デメリット：ソースコードが多くなる

div#side ul#sideMenu li#sideMenuButton {
background:url(../../images/menubutton_hover.gif);
}
div#side ul#sideMenu li#sideMenuButton a{
display:block;
width:200px;
height:50px;
background:url(../../images/menubutton.gif);
outline:none;
}
div#side ul#sideMenu li#sideMenuButton a:hover {
background:url(../../images/menubutton_hover.gif);
}

結論でいうとこの二つの方法だとどっちでもいいかなｗ

【CSS】