Question

我在CSS中编写了这段代码;这会使我网站上的所有链接都变白，当它们徘徊时，它们会变成灰色。

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

这是我网站上的部分，其中包含白色链接，并在悬停时变为灰色。我在网站上有四个不同的链接，用“|”分隔。我试图让每个链接保持白色，但只要它们在...上匹配我们的徽标就会改变为不同的HTML颜色。（下面附有我链接的代码的HTML部分。）

Page 1 | Page 2 | Page 3 | Page 4

我很乐意，如果有人可以帮我找出一个非常简单，简单的方法来制作每个链接，第1页，第2页，第3页和第4页，每个链接都会在它们徘徊时改变不同的HTML颜色。基本上，一个规则或某些东西说明名为Page 1的链接需要在＃C7C025上悬停...时，名字第2页的链接需要着色＃950285悬停在等等...

非常感谢你!!

Answer 1

为您的链接指定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; }
/* ... */

Answer 2

只需拥有一个父元素，并根据您的父元素尝试以下内容：

试试这个：

<div id="links">
<a href="http://www.my-website09090909.com/page1">Page 1</a> 
<b><span class="separator">|</span></b> 
<a href="http://www.my-website09090909.com/page2">Page 2</a> 
<b><span class="separator">|</span></b> 
<a href="http://www.my-website09090909.com/page3">Page 3</a> 
<b><span class="separator">|</span></b> 
<a href="http://www.mywebsite09090909.com/page4">Page 4</a>
</div>

CSS是：

<style type="text/css">
#links a:nth-of-type(1){color:#009900;}
#links a:nth-of-type(1):hover{color:#ccc;}
#links a:nth-of-type(2){color:#006699 ;}
#links a:nth-of-type(2):hover{color:#ccc;}
#links a:nth-of-type(3){color:#990000;}
#links a:nth-of-type(3):hover{color:#ccc;}
#links a:nth-of-type(4){color:#FF00CC;}
#links a:nth-of-type(4):hover{color:#ccc;}
</style>

HTML / CSS - 悬停链接颜色

2 个答案: