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

2006年10月4日

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

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

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

background:none !important;で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: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);
}

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

この記事について