导航栏悬停

时间:2017-02-16 20:33:03

标签: html css

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

我认为,有一些像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>

2 个答案:

答案 0 :(得分:0)

由于.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;

答案 1 :(得分:0)

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

:not()