CSS/HTML 中几种不同的鼠标悬停字体颜色变化

Question

等待！这不仅仅是另一个“当鼠标悬停在图像/文本/等上时如何更改字体颜色？”

我认为我可以将其作为一种黑客手段（通过内联每段文本的样式），但我听说样式应该与内容分开。我正在与我那老套的程序员路线作斗争，并努力变得更加自律。所以我来这里是为了寻求最好的方法来做到这一点。

我在我制作的网站上有一个简单的链接菜单，我希望它们是黑色字体（当鼠标没有悬停时），然后在鼠标悬停时更改为颜色。但我希望当鼠标悬停在其上时，每个都变成不同的颜色。

我应该为每种颜色命名一个样式，然后在使用每种颜色时声明一个 div 吗？这看起来与内联样式几乎相同。

我非常感谢您关于如何以正确的方式做到这一点的明智建议！

Answer 1

这一切都使用 CSS 完成 - 只需给它们不同的类名和 :hover 状态即可。使用 JavaScript 交换类名，以便在每次鼠标悬停事件后产生不同的颜色。

html:

<a href="..." class="c1">MENU TEXT</a>

css:

.c1 { background-color:#003300 }
.c1:hover { background-color:#006600 }
.c2 { background-color:#003300 }
.c2:hover { background-color:#006600 }
.....

Answer 2

CSS：

<style type="text/css">
    a { color: black; }
    a:hover { color: grey; }
    a.green:hover { color: green; }
    a.red:hover { color: red; }
    a.blue:hover { color: blue; }
    .content a:hover, .content a.green:hover, .content a.red:hover, .content a.blue:hover { color: yellow; }
</style>

HTML：

<a href="#" class="green">green link</a>
<a href="#" class="red">red link<a>
<a href="#" class="blue">blue link</a>
<a href="#" >grey link</a>

<div class="content">
    <a href="#" class="green">yellow link</a>
    <a href="#" class="red">yellow link<a>
    <a href="#" class="blue">yellow link</a>
    <a href="#" >yellow link</a>
</div>

Answer 3

你可以使用 CSS 的 nth-child 选择器，下面是一个例子：

#yourMenu ul li:nth-child(1) {
  color: #ff0000;
}
#yourMenu ul li:nth-child(2) {
  color: #00ff00;
}
#yourMenu ul li:nth-child(3) {
  color: #0000ff;
}
...
..

Answer 4

您只需为所有不同的链接/li提供不同的类即可做到这一点。

HTML

<ul class="menu">
  <li class="home">Home</li>
  <li class="contact">Contact</li>
  <li class="help">Help</li>
</ul>

CSS

ul.menu li a { color: black; }
ul.menu li.home:hover a { color: #000000; }
ul.menu li.contact:hover a { color: #ffffff; }
ul.menu li.help:hover a { color: #ff3300; }

这不是最好的方法：最好的方法是使用 CSS 伪类选择器：nth-​​child。

http://reference.sitepoint.com/css/pseudoclass-nthchild

然而惊喜惊喜IE不支持。较旧的浏览器也不支持它。

要查看哪些浏览器支持它，请参阅：

http://caniuse.com/#search=nth