HTML/CSS - 悬停链接颜色

HTML / CSS - Hover Link Color(HTML/CSS - 悬停链接颜色)

问题描述

我在我的 CSS 中编写了这段代码；这会使我网站上的所有链接变成白色，当它们悬停在上面时，它们会变成灰色.

I have this code written in my CSS; which makes all links on my site white, and when they're hovered on, they turn gray.

a:link {color: #FFFFFF}
a:active {color: #383838}
a:visited {color: #FFFFFF}
a:hover {color: #383838}

这是我网站的一部分，其中的链接是白色的，当鼠标悬停在上面时会变成灰色.我在网站上有四个不同的链接，用|"分隔.我试图让每个链接都保持白色，但只要将它们悬停在...上，就会更改为不同的 HTML 颜色……以匹配我们的徽标.(下面附有我的链接的代码的 HTML 部分).

Here's the portion of my site which has links that are white and turn gray when hovered on. I have four different links on the site separated by a "|" . I am trying to make each link STAY white, but change to a different HTML color whenever they're hovered on….to match our logo. (HTML section of the code that has my links are attached below).

第 1 页 | 第 2 页 | 第 3 页 | 第 4 页

如果有人可以帮助我找出一种非常简单的方法来制作每个链接(第 1 页、第 2 页、第 3 页和第 4 页)，当它们悬停在它们上时，每个链接都会更改不同的 HTML 颜色，我会很高兴的.基本上，一条规则或其他内容表明，当鼠标悬停时，名为 Page 1 的链接需要被着色为 #C7C025……而名为 Page 2 的链接在悬停时需要被着色为 #950285，依此类推……

I would love if someone could help me figure out a very easy, simple way to make each link, Page 1, Page 2, Page 3 and Page 4, each change different HTML colors when they're hovered on. Basically, a rule or something that says the link named Page 1 needs to be colored #C7C025 when hovered on…and the link named Page 2 needs to be colored #950285 when hovered on and so forth…

非常感谢您！

推荐答案

给你的链接一个 ID:

Give your links an ID:

<a id="page1" href="http://www.my-website09090909.com/page1">Page 1</a>
<a id="page2" href="http://www.my-website09090909.com/page1">Page 2</a>
<!-- .... -->

然后使用这个css:

#page1:hover { color: red; }
#page2:hover { color: blue; }
/* ... */

这篇关于HTML/CSS - 悬停链接颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！