.nav-item.hover不会更改导航链接的颜色

Question

如何更改以下内容，以便将鼠标悬停在导航栏项目上时，其颜色变为红色？

.nav-item.active .nav-link{
    color: blue !important;
}
.nav-item.hover .nav-link{
    color: red !important;
}

Answer 1

在CSS选择器more info中的伪类之前使用冒号而不是点：

.nav-item:active .nav-link{
    color: blue !important;
}
.nav-item:hover .nav-link{
    color: red !important;
}

注意：活动和：悬停