ユージック

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);
}

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

• Webkitがおもしろそう
• イメージ画像をCSSで装飾するサンプル
• IE6向けの便利なCSSハック
• CMSで便利なCSSを使った画像をリサイズする方法
• offspring.js
• サーバーサイドでJSとCSSをバンドルする方法
• CSSのFramework　Blueprint
• 超便利なブラウザチェックの仕方
• CSS3
• CSS編集エディタ　CSSVista