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

标签 html css hover navbar

我制作了一个导航栏,我想仅在非事件页面上使用悬停选择器。所以我使用了选择器 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 伪类在您的链接上。但是,活跃的类(class)正在上线。

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

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

关于html - 悬停问题导航栏 (HTML/CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44482875/

相关文章:

html - CSS - 悬停一项并删除另一项的内容

html - 像Div之类的FB会在IE中删除悬停状态

javascript - 可调整大小的元素边框

php - Web 开发/设计实践方法书籍?

html - 使文字高于渐变

javascript - 如何使 slider 进入页面的 100%

html - CSS网格布局-列不跨越

html - iOS库,用于格式化HTML

javascript - 从父级访问 iframe 的变量

html - 如何在JSP上分离内容层和表示层?