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