Ads by GoogleIEでマウスオーバーすると画像がちらつく

TOP>スポンサー広告>TOP>CSS よくあるトラブル>

Ads by Google

WEBデザインランキング

上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグリスト

--.--.-- スポンサー広告

IEでマウスオーバーすると画像がちらつく

WEBデザインランキング

画像をtext-indentで置き換えしてロールオーバーというのはもうCSSテクニックとしてもよく使われていますが　Internet Exprolerでマウスオーバーすると画像がちらつく現象が時々webサイトを拝見していて見受けられます。そんなマウスオーバーのちらつきの対処法。

直せますから大丈夫。

AタグにCSSで画像を設定しているケース

A　タグに画像を置き換えているだけだとHoverで違う画像に置き換えた場合　画像がちらつきます。よく使われるlistタグで説明します。


<ul>
<li>hogeA</li>
<li>hogeB</li>
<li>hogeC</li>
<ul>

CSSで画像に置き換える場合の間違ったケース


ul{
    list-style:none;
    width:***px;
}
li a{
    list-style:none;
    padding-left:**px;
    background:url(sampleA.gif) no-repeat center left;
}
li a:hover{
    list-style:none;
    padding-left:**px;
    background:url(sampleB.gif) no-repeat center left;
}

ちらつきを直す場合


ul{
    list-style:none;
    width:***px;
}
li, li a{
    list-style:none;
    padding-left:**px;
    background:url(sampleA.gif) no-repeat center left;
}
li a:hover{
    list-style:none;
    padding-left:**px;
    background:url(sampleB.gif) no-repeat center left;
}

上記のようにlist自体にも画像を設定しましょう。ちなみにFirefoxだとちらつかないです。