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