CSS 改变

中的标签字体颜色，但在悬停
时

阅读更多：<a href="https://sotoolbox.com/tag/CSS"

target="_blank" rel="nofollow">CSS 教程

初始设置

首先，我们需要给标签和

li {
  list-style-type: none;
  margin-bottom: 10px;
}
a {
  color: #000;
  text-decoration: none;
}a:hover {
  color: #ff0000;
}

在上述代码中，我们通过选择器li将样式应用于所有的

标签。我们使用了list-style-type: none来去除

的默认列表样式，并使用margin-bottom: 10px为每个

之间添加10个像素的底部间距。

接下来，我们通过选择器a将样式应用于所有的标签。我们使用了color: #000来设置标签的初始字体颜色为黑色，并使用text-decoration: none来去除标签的默认下划线。

最后，我们使用了选择器a:hover来在用户悬停在标签上时改变字体的颜色。在上述代码中，我们使用了color: #ff0000来将字体颜色更改为红色。

示例

现在，让我们应用上述样式并查看它们的效果。我们将创建一个简单的HTML文档，并将上述CSS代码嵌入其中。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Changing font color on hover</title>
  <style>
li {
  list-style-type: none;
  margin-bottom: 10px;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  color: #ff0000;
}
</style>
</head>
<body>
  <ul>
&lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Link 3&lt;/a&gt;&lt;/li&gt;</ul>
</body>
</html>

在上述代码中，我们创建了一个包含三个

标签的无序列表。每个

标签中有一个标签，指向一个虚拟的链接（#）。这样我们就可以通过悬停在

上来看到字体颜色的变化。

通过将上述代码复制并粘贴到HTML文件中，您就可以在浏览器中打开该文件，并查看效果了。当您将鼠标悬停在

上时，标签的字体颜色将从初始的黑色变为红色。