这必须是非常简单的事情,但是我只是没有看到它,因此希望能得到一些建议。

当鼠标悬停在不同的链接上时,我应用了CSS使不同的图像出现。 默认情况下,其中一张图像是背景jpg图像的一部分。 所有其他图像仅在鼠标悬停在相应链接上时显示。

问题:当我沿链接的行左右滑动光标或垂直上下滑动光标时,链接之间有大约4像素左右的间隙。 当光标位于间隙上方时,链接无效,因此顶部没有图像出现,并且背景图像也暴露出来,从而产生了闪烁。

问题:如何消除链接之间的间隙,使背景图像仅在光标悬停在链接上方时才可见?

先感谢您!

===============>>#1 票数: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> 

  ask by Dimitri Vorontzov translate from so

未解决问题?本站智能推荐: