1

このコードはCSSで記述しています。これにより、私のサイトのすべてのリンクが白くなり、カーソルを合わせると灰色になります。

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

これが私のサイトの一部で、ホバーすると白く灰色に変わるリンクがあります。サイトには「|」で区切られた4つの異なるリンクがあります 。各リンクを白のままにしようとしていますが、ロゴに合わせて、ホバーするたびに別のHTMLカラーに変更します。（私のリンクがあるコードのHTMLセクションは以下に添付されています）。

ページ1 | ページ2 | ページ3 | 4ページ

ページ1、ページ2、ページ3、ページ4の各リンクにカーソルを合わせると、それぞれ異なるHTMLの色を変更する、非常に簡単で簡単な方法を誰かが理解してくれるといいのですが。基本的に、ページ1という名前のリンクは、ホバーしたときに＃C7C025に色を付ける必要があり、ページ2という名前のリンクは、ホバーしたときに＃950285に色を付ける必要があります... </ p>

事前にどうもありがとうございました！！

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 に答える