导航栏悬停

我在导航栏中遇到了这个问题。因此，当鼠标悬停在元素上时，我使用悬停的功能区导航栏。我有类“.active”，然后功能区稍长一点，但是当我将鼠标移到这个活动元素功能区时会减少。我想知道除了那个“.active”类以及下拉内容之外，怎样才能使其悬停。导航栏悬停

我认为，这些伪元素有一个工作：not（），但我不确定，我尝试了几乎所有的东西。

谢谢。

Here is my HtTML+CSS code so far!

<nav role="top"> 

<ul> 
<div class="ribbon"> 
<li><a href="#">Home</a></li> 
<li ><a href="#">Blog</a></li> 
<li class="active" ><a href="#">Portfolio</a></li> 
<li><a href="#">Music</a></li> 
     <li class="dropdown"> 
<a href="#" class="dropbtn">Dropdown</a> 
<div class="dropdown-content"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 3</a> 
    <li id="livechat" ><a href="#">About me</a></li> 




</div> 
</div> 
</ul>

来源

2017-02-16 valeo

由于.active被应用于父li，你需要使用上:not()目标.active与否，再申请当你将鼠标悬停一个链接，改变CSS

nav[role="top"] li:not(.active) a:hover { ... }

nav[role="top"] ul { 
 
    list-style-type: none; 
 
    float: right; 
 
    margin-top:0px; 
 
} 
 

 
nav[role="top"] li { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: right; 
 
    padding:0 8px; 
 

 
} 
 

 
nav[role="top"] a { 
 
    display: block; 
 
    color: #b3b3b2; 
 
    text-align: center; 
 
    padding: 14px 0px; 
 
    text-decoration: none; 
 
    width: 70px; 
 
    font-size: 11px; 
 
    font-family: 'Pontano Sans', sans-serif; 
 
    font-weight: 600; 
 
    
 
    
 
} 
 

 
nav[role="top"] li:not(.active) a:hover { 
 
\t 
 
    height:1px; 
 
    text-decoration: none; 
 
    width: 70px; 
 
    background-color: #aecacc; 
 
    color:#fff; 
 
} 
 

 

 

 

 

 
nav[role="top"] a:hover::after { 
 
    margin-top:-18px; 
 
\t content: ""; 
 
    display: block; 
 
    position: static; 
 
    width: 0; 
 
    height:20px; 
 
    border-right: 35px solid #aecacc; 
 
    border-left: 35px solid #aecacc; 
 
    border-bottom: 12px solid rgba(224, 33, 33, 0); 
 
} 
 

 

 

 
.active a { 
 
    
 
    height:12px; 
 
    text-decoration: none; 
 
    width:20px; 
 
    
 
    background-color: #aecacc; 
 

 
} 
 

 
.active a:first-child { 
 
\t color:white; 
 
} 
 

 
.active::after { 
 
    
 
    margin-top:0px; 
 
\t content: ""; 
 
    display: block; 
 
    position: static; 
 
    width: 0; 
 
    height: 20px; 
 
    border-right: 35px solid #aecacc; 
 
    border-left: 35px solid #aecacc; 
 
    border-bottom: 12px solid rgba(224, 33, 33, 0); 
 
} 
 

 

 

 
li.dropdown { 
 
    display: inline-block; 
 

 
} 
 

 
.dropdown-content { 
 

 
    display:none; 
 
    position: fixed; 
 
    
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
    transition: all .4s ease-in-out; 
 

 
} 
 

 
.dropdown-content a:hover { 
 
\t background-color: rgba(208, 208, 207, 0.2) 
 

 
} 
 
.dropdown:hover .dropdown-content { 
 
    display:block; 
 
}

<nav role="top"> 
 

 
    <ul> 
 
\t <div class="ribbon"> 
 
\t <li><a href="#">Home</a></li> 
 
\t <li ><a href="#">Blog</a></li> 
 
\t <li class="active" ><a href="#">Portfolio</a></li> 
 
\t <li><a href="#">Music</a></li> 
 
      <li class="dropdown"> 
 
    <a href="#" class="dropbtn">Dropdown</a> 
 
    <div class="dropdown-content"> 
 
     <a href="#">Link 1</a> 
 
     <a href="#">Link 2</a> 
 
     <a href="#">Link 3</a> 
 
\t <li id="livechat" ><a href="#">About me</a></li> 
 
\t 
 
\t 
 
\t 
 
\t 
 
    </div> 
 
\t </div> 
 
    </ul> 
 
</nav>

来源

2017-02-16 20:36:08

谢谢你这个工作！ “下拉内容”如何？如果我不希望色带出现？我试过nav [role =“top”] a：not（.dropdown-content）li：不是（.active）a：hover {...}但它不会以这种方式工作。 – valeo

一下你对这个:not()正确。将它添加到你的CSS的第29行

nav[role="top"] li:not(.active) a:hover { 
    height:1px; 
    text-decoration: none; 
    width: 70px; 
    background-color: #aecacc; 
    color:#fff; 
}

来源

2017-02-16 20:38:03 Digedu

回答

相关问题