0

これはとてつもなく単純なものでなければなりませんが、私はそれを見ていないので、少しアドバイスをいただければ幸いです。

マウスを別のリンクの上に置いたときに別の画像が表示されるように、CSS を適用しました。画像の 1 つはデフォルトでそこにあり、背景の jpg 画像の一部です。他のすべての画像は、対応するリンクの上にマウスを置いたときにのみ表示されます。

問題:カーソルをリンクの行に沿って左右に、または上下に垂直にスライドすると、リンク間に約 4px 程度の隙間ができます。カーソルがギャップの上にある場合、リンクは無効であるため、上部に画像が表示されず、背景画像が表示され、一種のちらつきが発生します。

質問:カーソルがリンクの上に置かれたときだけ背景画像が表示され、それ以外の場所では表示されないように、リンク間のギャップを削除するにはどうすればよいですか?

前もって感謝します！

4

1 に答える 1

1

この小さなギャップの理由は、2 つの要素の間に改行または複数のスペースがある場合、ブラウザーはそれらすべてを 1 つのスペースに折りたたむためです。まさにあなたが見ている空間。

あなたがする必要があるのは次のとおりです（マークアップが見苦しいことは知っています）：

<div id="hero-links-container">
<ul> 
    <li>
        <a href="" id="hero-link-pianos"><div id="hero-image-piano"></div>Pianos</a><a href="" id="hero-link-woodwinds"><div id="hero-image-woodwinds"></div>Woodwinds</a><a href="" id="hero-link-percussion"><div id="hero-image-percussion"></div>Percussion</a><a href="" id="hero-link-music-education"><div id="hero-image-music-education"></div>Music Education</a><a href="" id="hero-link-brasswinds"><div id="hero-image-brasswinds"></div>Brasswinds</a><a href="" id="hero-link-strings"><div id="hero-image-strings"></div>Strings</a><a href="" id="hero-link-accessories"><div id="hero-image-accessories"></div>Accessories</a><a href="" id="hero-link-recorded-music"><div id="hero-image-recorded-music"></div>Recorded Music</a>
    </li>
</ul>
</div>
于 2013-04-17T21:53:34.497 に答える