a：hover：not（）execption只响应.active类？

时间：2018-05-04 21:56:41

标签： html css frontend

我创建了一个导航栏并分为3个部分： 1. id =“菜单” 2. id =“假”（填充空格的按钮） 3. id =“社交”

我基本上希望.active页面和假按钮不包含在悬停效果中，但看起来如果我创建.fake classe并尝试：hover：not（.fake）它不起作用。 而且我真的想知道是否有可能创造不止一次的重复。

这是整个代码

body{
	font-family:'Skranji',sans-serif;
	font-size:100%;
	margin:0;
}
#nav{
	margin:0;
	padding:0;
	width:100%;
  height:35px;
	position:fixed;
	overflow-y:hidden;
	font-size:16px;
	letter-spacing:3px;	
		
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-color:black;
}
#nav a:not(.active){
	background-color:rgba(0, 0, 0, 0.72);
}
#nav a.active{
	background-color:black;
	color:white;	
}
#nav a:hover:not(.active){
	background-color:rgba(128, 127, 127, 0.25);
	color:black;
}
/*#nav a.fake{
	background-color:rgba(0, 0, 0, 0.72);
}
nav a:hover:not(.fake){
	background-color:rgba(128, 127, 127, 0.25);
	color:black;
}*/



#menu{
	width:70%;
}
#fake{
	width:15%;
	display:block;
	float:left;
}
#social{
	width:15%;
	float:left;
}
#menu a{
	display:table;
	width:25%;
	float:left;
}
#fake a{
	width:100%;
	display:table;
}
#social a{
	float:right;
	width:33.33%;
}
#menu a,#social a,#fake a{
	text-decoration:none;		
	margin:0;
	padding:5px;
	color:white;
	text-align:center;
}
.rMargin{
	margin-right:10px;
}
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->   
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css.css">
    <link href="https://fonts.googleapis.com/css?family=Skranji" rel="stylesheet"> 
  </head>
  <body>
      
    <header>
      <div id="nav">
        <div id="menu">
          <a class="active" href="home.html"><i class="fas fa-home rMargin"></i>Home</a>
          <a href="blog.html"><i class="fas fa-globe rMargin"></i>Blog</a>
          <a href="learn.html"><i class="fas fa-code rMargin"></i>Learn</a>
          <a href="contactMe.html"><i class="fas fa-envelope rMargin"></i>Contact Me</a>  
        </div> 

        <div id="fake" >
          <a class="fake" href="#"><button style="visibility:hidden"></button></a>
        </div>

        <div id="social">               
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a> 
            <a href="#"><i class="fab fa-facebook-f"></i></a>                                
        </div>
      </div>        
      </header>
    
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

1 个答案:

答案 0 :(得分：0)

刚刚找到答案！出于某种原因a：hover：not（）只接受.active类我认为，所以在我个人的情况下我需要在我需要异常的元素中插入活动类，然后添加另一个类来重新设置它以便元素实际上看起来不像.active类。 您需要深入了解代码才能理解，但实际上是解决问题的好方法

＆＃13;
＆＃13; 
body{
	font-family:'Skranji',sans-serif;
	font-size:100%;
	margin:0;
}
#nav{
	margin:0;
	padding:0;
	width:100%;
	height:35px;
	position:fixed;
	overflow-y:hidden;
	font-size:16px;
	letter-spacing:3px;	
		
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-color:black;
}
#nav a:not(.active){
	background-color:rgba(0, 0, 0, 0.72);
}
#nav a.active{
	background-color:black;
	color:white;	
}
#nav a:hover:not(.active){
	background-color:rgba(128, 127, 127, 0.25);
	color:black;
}
#nav a.fake{
	background-color:rgba(0, 0, 0, 0.72);
}



#menu{
	width:70%;
}
#fake{
	width:15%;
	display:block;
	float:left;
}
#social{
	width:15%;
	float:left;
}
#menu a{
	display:table;
	width:25%;
	float:left;
}
#fake a{
	width:100%;
	display:table;
}
#social a{
	float:right;
	width:33.33%;
}
#menu a,#social a,#fake a{
	text-decoration:none;		
	margin:0;
	padding:5px;
	color:white;
	text-align:center;
}
.rMargin{
	margin-right:10px;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->   
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css.css">
    <link href="https://fonts.googleapis.com/css?family=Skranji" rel="stylesheet"> 
  </head>
  <body>
      
    <header>
      <div id="nav">
        <div id="menu">
          <a class="active" href="home.html"><i class="fas fa-home rMargin"></i>Home</a>
          <a href="blog.html"><i class="fas fa-globe rMargin"></i>Blog</a>
          <a href="learn.html"><i class="fas fa-code rMargin"></i>Learn</a>
          <a href="contactMe.html"><i class="fas fa-envelope rMargin"></i>Contact Me</a>  
        </div> 

        <div id="fake" >
          <a class="active fake" href="#"><button style="visibility:hidden"></button></a>
        </div>

        <div id="social">               
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a> 
            <a href="#"><i class="fab fa-facebook-f"></i></a>                                
        </div>
      </div>        
      </header>

    
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题