个人中心
gpt4 book ai didi

html - :hover:not() execption responds only to the . 事件类？

转载 作者：行者123 更新时间：2023-11-28 01:45:59 24 4
gpt4 key购买 nike

我创建了一个导航栏并分为 3 个部分:1.id="菜单"2. id="fake"(按钮填充空间)3.id="社交"

我基本上希望 .active 页面和假按钮不包含在悬停效果中，但看起来如果我创建一个 .fake classe 并尝试 a: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>

最佳答案

刚找到答案!出于某种原因 a:hover:not() 我认为只接受 .active 类，所以在我个人的情况下，我需要在我需要异常的元素中插入 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>

关于html - :hover:not() execption responds only to the . 事件类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50183564/

24 4 0
文章推荐： c++ - 在 WScript.CreateObject 中使用前缀的目的是什么？
文章推荐： javascript - 如何创建自定义事件并使用 Javascript 触发它
文章推荐： javascript - 从 JSP 调用 EXTJS 方法时未捕获的类型错误和 Uncaught ReferenceError
文章推荐： javascript - clearRect() 在 html5 Canvas 中不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com