1

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}

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).

Page 1 | Page 2 | Page 3 | Page 4

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…</p>

Thank you very much in advance!!

4

2 回答 2

3

给你的链接一个 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; }
/* ... */
于 2013-03-17T06:59:01.370 回答
1

只需有一个父元素，然后根据您的父元素尝试以下操作：

试试这个：

<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>
于 2013-03-17T06:59:16.843 回答