0

为这可能是一个非常基本的问题道歉，但我还没有在网上找到解决方案。

我有一个简单的 CSS 菜单，这里是 CSS：

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    opacity:1;
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #ccc;
}

#nav li {
    float: left; 
}

#nav li a {
    display: block;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #069;
    border-right: 1px solid #ccc;
}

#nav li a:hover {
    color: #c00;
    background-color: #fff;
}

/* End navigation bar styling. */

这是来自在线教程，所以不是我的代码。

这是HTML：

<!-- language: lang-html -->

<ul id="nav">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Our Products</a></li>
    <li><a href="#">FAQs</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Login</a></li>
</ul>

我想要做的就是在悬停时为每个菜单项设置不同的颜色（u）。
我假设您需要为每个项目创建一个单独的 id（或类），但我不确定语法，无论我尝试什么，它都无法正常工作。

非常感谢您的帮助。

4

4 回答 4

2

您可以使用:nth-child选择器，但它不适用于某些旧版本的 IE。

提琴手

#nav li:nth-child(1) a:hover {
 color:green;
}

#nav li:nth-child(2) a:hover {
color:blue; 
}

等等

于 2013-08-09T17:29:54.967 回答
2

向 href 链接添加一个类，然后在您的 css 中调用悬停状态，然后相应地设置样式。这是使用您的代码的示例：http: //jsfiddle.net/LGL37/

的HTML：

<a href="#" class="about">TEXT</a>

CSS

.about:hover { background: yellow; }

编辑：这是一个比其他答案更好的解决方案，因为它是跨浏览器兼容的，如果您将来需要更多样式，您将拥有单独的类来定位而不是 nth 可能会让人困惑。

于 2013-08-09T17:32:28.743 回答
2

如果你不使用:nth-child()选择器，你可以为每个类添加一个唯一的li类nav

<li class="about"><a href="#"></a></li>

并在样式表中为该特定类设置悬停效果

#nav li.about a:hover { background-color: red; }
于 2013-08-09T17:32:42.230 回答
1

您可以使用第 n 个孩子：

li:nth-child(2) a:hover{
  color: red;
}

http://jsfiddle.net/fAbFg/

此示例影响第二项。

于 2013-08-09T17:29:32.103 回答