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中的元素而不是li。例如：http://jsfiddle.net/MGRBS/2/

这样一来，链接占据了整个区块空间，祝你好运。：d

Answer 2

你应该更喜欢使用CSS Sprites。参考这些链接

vid link

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用作浮动属性，将它们视为表中的TD。他们应该没有自己的风格。

更改背景图片和a：li的悬停颜色

4 个答案: