悬停问题导航栏（HTML / CSS）

茉莉花

我做了一个导航栏，我只想在非活动页面上使用悬停选择器。所以我使用了选择器，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>

阿克斯尼夫

您的：not伪类位于您的链接上。但是，活动班级在上。

li:not(.active) a:hover 应该管用

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。