HTML/CSS - 懸停鏈接顏色

我有這樣的代碼寫在我的CSS;這使得我網站上的所有鏈接都變成白色，並且當它們徘徊時，它們變成灰色。HTML/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當盤旋在...上，並且名爲Page 2的鏈接需要着色＃950285當盤旋時等等......

非常感謝提前！！

來源

2013-03-17 Anonymous

給你鏈接的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-17 06:59:01

你是快的傢伙 – btevfik 2013-03-17 06:59:39

非常感謝你。非常簡單，並在第一次工作。 – Anonymous 2013-03-17 07:03:34

只要有一個父元素，並根據您的父元素如下嘗試：

試試看這個：

<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-17 06:59:16

+1也可以。只有一個提示：不適用於較舊的瀏覽器。 – 2013-03-17 07:00:06

會有一個使用id方法的理由嗎？ – btevfik 2013-03-17 07:01:54

http://jsfiddle.net/Z4TS3/ – TNK 2013-03-17 07:02:22

HTML/CSS - 懸停鏈接顏色

回答

相關問題