Question

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

我认为我可以将其作为黑客（通过内联每个文本的样式），，但我听说样式应该与内容分开。我正在与我的hacky程序员路线作斗争并试图变得更有纪律。所以我在这里要求最佳方式来做到这一点。

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

我应该为每种颜色命名样式，然后在每次使用时声明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

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

4 个答案: