css - 同一页面的不同悬停效果

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