Исключение a: hover: not () отвечает только на класс .active? - PullRequest
Новая
       2

Исключение a: hover: not () отвечает только на класс .active?

0 голосов
/ 05 мая 2018

Я создал navbar и разделил на 3 раздела: 1. id = "menu" 2. id = "fake" (кнопка для заполнения пространства) 3. id = "social"

Я хочу, чтобы страница .active и кнопка fake не были включены в эффект наведения, но похоже, что если я создаю класс .fake и попробую: 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 голосов
/ 05 мая 2018

Только что нашел ответ! По какой-то причине a: hover: not () принимает только .active класс, я думаю, поэтому в моем личном случае мне нужно было вставить активный класс в элемент, в котором я нуждался в исключении, а затем добавить другой класс, чтобы изменить его так, чтобы элемент на самом деле не похож на класс .active. Вам нужно немного разобраться в коде, чтобы понять, но на самом деле это хороший способ решить проблему 

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;
}
<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...