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

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