html - 更改背景图像和 a:li 的悬停颜色

Question

我有这个菜单架构：

<nav>
    <ul>
        <li><a href="index.asp">home</a></li>
        <li><a href="colecao.asp">coleção</a></li>
        <li><a href="tecnologia.asp">downloads</a></li>
        <li><a href="contato.asp">contato</a></li>
    </ul>
</nav>

我的 LI 是float:left这样的，它是并排的。我想当我悬停a:hover我的背景 LI 时，颜色会发生变化。

看到这个小提琴：http: //jsfiddle.net/56wUm/

如果您只将鼠标悬停在 上li，则链接不起作用并且a不改变颜色！

求帮助！

Answer 1

如果您仍然需要帮助，我建议将填充添加到 css 中的 a 元素而不是 li。例如这样的：http: //jsfiddle.net/MGRBS/2/

这样链接就占据了整个块空间，祝你好运。:D

Answer 2

您应该更喜欢使用 CSS Sprites 来实现这一点。参考这些链接

视频链接

http://css-tricks.com/css-sprites/

Answer 3

要准确修复正在发生的事情，您需要稍微更改 a:hover 规则：

ul li:hover a { color: #fff }

见：http: //jsfiddle.net/56wUm/4/

但是，就可用性而言，我认为您最好让链接占据所有菜单空间，从而形成一个大目标。

Answer 4

您想将一些 CSS 从 A 移动到 LI。目标是让 A 与 LI 直接对接，因此没有差距。您只想将 LI 用于其浮动属性，将它们视为 TABLE 中的 TD。他们不应该有自己的真正风格。