导航栏悬停

Question

我在导航栏中遇到这一件事。 因此，当鼠标悬停在元素上时，我将鼠标悬停在导航栏上。我确实有班级＆＃34; .active＆＃34;然后功能区稍微长一些，但当我将鼠标悬停在此活动元素上时，功能区会减少。我想知道除了那个＆＃34; .active＆＃34;类，以及下拉内容。

我认为，有一些像Pseudo-elements这样的作品：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>

Answer 1

由于.active已应用于父li，您需要使用:not()来定位.active，然后应用随时更改的CSS悬停链接

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

＆＃13;

＆＃13;

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  {
	
  height:1px;
  text-decoration: none;
  width: 70px;
  background-color: #aecacc;
  color:#fff;
}





nav[role="top"] a:hover::after {
    margin-top:-18px;
	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 {
	color:white;
}

.active::after {
   
    margin-top:0px;
	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 {
	background-color: rgba(208, 208, 207, 0.2)

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

＆＃13;

<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>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

$filter你是对的。将其添加到CSS的第29行

:not()