在同一页面中有不同的悬停效果

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; 
}