CSS a:hover 在 doctype 中对我不起作用答案

【问题标题】：CSS a:hover not working for me in doctypeCSS a:hover 在 doctype 中对我不起作用
【发布时间】：2018-08-27 21:59:22
【问题描述】：

突然 a:hover 不起作用，我一直在努力解决 8 小时的问题，如果有人可以提供帮助，那将是非常好的。哦，请忽略我尚未使其响应的链接的大小。

当我将鼠标悬停在链接上时，背景颜色应该会改变，尽管它不会。几天前，a:hover 对我有用，

$(document).ready(function(){
	//animation for slides
	$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 4000);
	//end of animation
	

});

@charset "utf-8";
@import url("webfonts/drugulinclm_bold/stylesheet.css");

/* CSS Document */






nav{
	
	z-index: -1;
	
	text-align: center;
	position: absolute;
	background-color: #334450;
	height: 150px;
	padding: 20px 0px;
	width: 100%;
	margin: 0px auto;
}
nav ul{
	
	display: inline-block;
	position: relative;
	
	
	
	margin: 40px auto;
	padding: 5px 0px 5px 30px;
}
nav li{
	display: inline;
	list-style: none;
	margin-right: 20px;
}

a{
	display: inline;
	text-decoration: none;
	font-size: 50px;
	vertical-align: text-bottom;
	color: black;
	background-color: #C5FFFC;
	width: auto;
	height: auto;
	padding:20px 40px
	
}
#speciala{
	background-color: orange;
}

#nav ul li a:visited{
	color: purple ;
}
#nav ul li a:hover{
	background-color: #3A98FC;
}
#speciala:hover{
	background-color: rgba(255,113,3,1.00)
}

#logo{
	z-index: 2;
	display: block;
	position: absolute;
	width: auto;
	height: auto;
	max-width: 350px;
	max-height: 350px;
	right: 0;
	margin-top: 89px;
}


header{
	position: relative;
	width: auto;
	
	height: auto;
}
footer{

}
main{
	position: relative;
	display: block;
}
#title{
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	
}
#line{
	
		
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: -280px;
}
h2{
	position: relative;
	display: block;
	top: 200px;
	text-align: center;
	font-size: 48px;
}
body {
	background-color: #FFF9E3;
	color: #000000;
	font-family: "drugulinclm bold";
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.important-title {
	text-align: center;
	font-style: normal;
	font-weight: bold;
	font-size: 72px;
}
#slideshow { 
	 width: 1500px; 
    height: auto; 
	display: block;
    margin: auto; 
    position: relative; 
   
    padding: 0px;

    
}
#slides{
	position:absolute;
	display: block;
	transform-origin: center;
	width: 1500px;
	height: 900px;
	
	
	margin: auto;
	top: 200px;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<link href="style.css" rel="stylesheet" type="text/css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>

	
<body>
	<header>
	<img src="images/Logo.png" id="logo" href="index.html"  alt=""/>
<nav id="nav">
	
     <ul>
	
	<li><a href="#">מנות ראשונות</a></li>
	<li><a href="#">בשרים</a></li>
	<li><a href="#">פחמימות</a></li>
	<li><a href="#">דגים</a></li>
	<li><a href="#">קינוחים</a></li>
	<li><a id="speciala" href="#">העלו מתכון שלכם</a></li></ul>
    
		</nav>
		
	</header>
	<main>
		<div id="title"><h2>Pasta With Meatballs</h2>
		
		<img id="line"src="images/decorative-clipart-fancy-3.png" alt=""/></div>
		
		<div id="slideshow">
			<div>
				<img id="slides" src="images/d87c1237-c3e2-401a-b26b-9afc323e503f.jpg" alt=""/> 
			</div>
			<div>
				<img id="slides" src="images/1.png" alt=""/> 
			</div>
		</div>
	 
	</main>
	
	<footer>
	
	</footer>
</body>
</html>

【问题讨论】：

一个不可见的元素正在重叠..检查您添加的幻灯片
您的 div id 幻灯片与导航重叠

标签： jquery html css html-lists

【解决方案1】：

您的nav 上的z-index 为-1。

改成：

nav {
    z-index: 1;
    ...
}

应该没问题。

【讨论】：