Question

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

当鼠标悬停在不同的链接上时，我应用CSS来显示不同的图像。其中一个图像默认存在，是背景jpg图像的一部分。所有其他图像仅在鼠标悬停在相应链接上时出现。

问题：当我沿着链接行向左或向右滑动光标，或垂直上下滑动时，链接之间有间隙，大约4px左右。当光标位于间隙上方时，链接无效，因此顶部不会显示图像，并显示背景图像，从而产生一种闪烁。

问题：如何删除链接之间的间隙，只有当光标悬停在链接上时才能保持背景图像可见，但是没有其他地方？

提前谢谢！

Answer 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>

删除无序列表中链接之间的间隙

1 个答案: