在同一頁面中有不同的懸停效果

Question

我在理解如何在同一頁面中包含2個不同的懸停屬性時有點困惑。我想爲我的導航欄產生與我的網頁中的某些內容不同的懸停效果。

我現在的CSS如下：

a:hover { 
    color: #CCC; 
    background-color: #D8D8D8; 
    cursor: default; 
} 

假設我只是想從一個鏈接改變背景顏色到下一個，怎麼會有上述變化？

Answer 1

你可以使用不同類的鏈接：

<a class="typeA">foo</a> 
<a class="typeB">bar</a> 

a.typeA:hover { 
    color: #CCC; 
    background-color: #D8D8D8; 
    cursor: default; 
} 

a.typeB:hover { 
    color: #C0C; 
    background-color: #fc0; 
    cursor: default; 
}