0

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

当鼠标悬停在不同的链接上时，我应用了 CSS 来制作不同的图像。默认情况下，其中一张图像是背景 jpg 图像的一部分。只有当鼠标悬停在相应的链接上时，才会出现所有其他图像。

问题：当我沿链接行左右滑动光标时，或者垂直上下滑动时，链接之间有间隙，大约4px左右。当光标在间隙上时，链接无效，因此顶部没有图像，并且显示背景图像，产生一种闪烁。

问题：如何消除链接之间的间隙，使背景图像仅在光标悬停在其链接上时才可见，但在其他地方不可见？

先感谢您！

4

1 回答 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>
于 2013-04-17T21:53:34.497 回答