html - 悬停问题导航栏 (HTML/CSS)

Question

我制作了一个导航栏，我只想在不活动的页面上使用悬停选择器。所以我使用了选择器 a:not(.active):hover 但它不起作用。如果有人能帮助我，我将不胜感激。

ul 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display:block;
    position:absolute;
    top:-2px;
    left:0;
    right: 0;
    background-color: darkred;
}

li 
{
    float: left;
}

li a 
{
    display: block;
    color: white;
    text-align: center;
    padding: 20px 23px;
    text-decoration: none;
}

li a:not(.active):hover
{
    background-color: #B22222;
}

.active {
    background-color: #470005;
}

<ul>
                <li class="active"><a href="home.html">Home</a></li>
                <li><a href="#about">About me</a></li>
                <li><a href="#contacts">Contacts</a></li>
                <li><a href="#help">Help</a></li>
                <li><a href="#other">Other Works</a></li>
                <li><a href="#news">News</a></li>
</ul>

Answer 1

你的 :not 伪类在你的链接上。但是，active 类在 li 上。

li:not(.active) a:hover 应该可以工作

JSfiddle 示例:https://jsfiddle.net/ubntkk46/