突然间，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>您的navz-index为 -1。
将其更改为：
nav {
z-index: 1;
...
}
应该没问题。