Question

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

我有一个简单的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>

我想要做的就是在盘旋时为每个菜单项设置不同的colo（u）rs 我假设你需要为每个项目创建一个单独的id（或类），但我不确定语法，无论我尝试什么它根本不起作用。

非常感谢您的帮助。

Answer 1

您可以在某些旧版IE中使用:nth-child选择器，但won't work。

JsFiddle

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

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

等

Answer 2

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

HTML：

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

CSS

.about:hover { background: yellow; }

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

Answer 3

如果您不使用:nth-child()选择器，则可以为li

中的每个nav添加一个唯一的类

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

并在样式表中为该特定类

设置悬停效果

#nav li.about a:hover { background-color: red; }

Answer 4

你可以使用nth-child：

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

http://jsfiddle.net/fAbFg/

此示例影响第二项。

CSS菜单多个悬停Colo（u）rs

4 个答案: