hoverしてbackgroundを変える際に起こるちかちかを解消する方法

ホバーして背景の画像を変える際に、

HTML

<p class="foo"><a href="">アコーダー株式会社</a></p>

CSS

.foo { background: url(../images/bbb.jpg); } 
.foo:hover { background: url(../images/ccc.jpg); }
.foo a { width:200px; height:200px; display:block; }

と指定すると、ホバーして画像が切り変わる瞬間に一瞬白くなることがあります。今回はこの問題を解決する方法をお伝えします。変更するのはCSSだけです。

CSS

.foo { background: url(../images/ccc.jpg); } 
.foo a { background: url(../images/bbb.jpg); width:100%; height:100%; display: block; }
.foo a:hover { background: none; }

hoverしたら見える画像を「foo」の背景にして、ホバー前に見えている画像を<a>の背景にしています。 ホバーしたら<a>の背景が消えて、<li>の背景が見える仕組みです。これなら画像が切り替わる瞬間にちらつく問題を解決できます。