我正在为我的网站构建一个菜单但由于某种原因，当我将鼠标悬停在某个项目上时，“事件”不会触发该类被激活。活动类也不会显示
要点： 1.On_Hover不会工作 2.Active不会
相关代码在这里
@font-face {font-family: Futura; src: url('FuturaOriginal.ttf');}
@font-face {font-family: FuturaLight; src: url('FuturaLight.ttf');}
@font-face {font-family: FuturaBold; src: url('FuturaBold.ttf');}
BODY {
font-family: FuturaLight;
background: white; color: #333;
align-content: top;
margin: 0;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
#primary_nav_wrap
{
margin-top:100px;
text-align: center;
position: fixed;
width: 100%;
color: white;
border-bottom: 5px solid darkgreen;
background-color: #FFDE46;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
display: inline-block;
margin:0;
padding:0;
color: darkgreen;
}
#primary_nav_wrap ul a
{
display:block;
color: white;
text-decoration:none;
font-weight:700;
font-size:20px;
line-height:32px;
padding:0 15px;
font-family: FuturaBold;
color: white;
background-color: darkgreen;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
color: white;
}
#primary_nav_wrap ul li.current-menu-item
{
background-color: lawngreen;
color: white;
}
#primary_nav_wrap ul li:hover
{
background-color: black;
color: white;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background-color: white;
color: darkgreen;
padding:0;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
border: 1px solid #FFDE46;
color: White;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px;
color: White;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%;
color: white;
}
#primary_nav_wrap ul li:hover > ul
{
display:block;
}
.spacer
{
width: 100%;
height: 110px;
}
.side
{
position: fixed;
width: 250px;
border-right-style: solid;
border-width: 5px;
height: 100%;
align-self: left;
float: left;
}
.main
{
width: 100%;
float: left;
}
H1 {
font-size: 60px;
margin-top: 0;
padding-bottom: 50px;
padding-top: 1px;
text-align: center;
list-style-type: none;
position: fixed;
width: 100%;
top: 0;
font-family: FuturaBold;
color: green;
background-color: #FFDE46;
}
/*Opmaak van je header2*/
H2 {
font-family: Futura;
font-size: 40px;
/*Kleur toevoegen*/
color: darkgreen;
/*Tekst centreren*/
text-align:center;
}
/*Opmaak header3*/
H3 {
font-family: Futura;
/*Kleur toevoegen*/
font-size:30px;
color: darkgreen
}
p.futura20{
font-family: Futura;
font-size: 16px
}
p.futura25{
font-family: Futura;
font-size: 20px
}
.spacer2
{
height: 10px;
}
#footer {
margin-bottom: 0px;
align-self: bottom;
height: 200px;
background-color: #FFDE46;
position: relative;
}
.scoutsgidsen {
height: 150px;
position: absolute;
left: 300px;
bottom: 20px;
}
.logo {
height: 150px;
position: absolute;
right: 300px;
bottom: 20px;
}
.avondlied {
font-family: Futura;
font-size: 18px;
text-align: center;
font-weight: 800;
}<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="scouts_permeke_site.html">Home</a></li>
<li><a href="scouts_news.html">Nieuws</a></li>
<li><a href="scouts_takken.html">Takken ▼</a>
<ul>
<li><a href="scouts_kapoenen.html">Kapoenen (6-8 jaar)</a></li>
<li><a href="scouts_kawellen.html">Kawellen (8-11 jaar)</a></li>
<li><a href="scouts_jonggivers.html">Jonggivers (11-14 jaar)</a></li>
<li><a href="scouts_givers.html">Givers (14-17 jaar)</a></li>
<li><a href="scouts_leiding.html">Jin, leiding en VT (+17 jaar)</a></li>
</ul>
</li>
<li><a href="scouts_activiteiten.html">Activiteiten ▼</a>
<ul>
<li><a href="scouts_kapoenena.html">Kapoenen</a></li>
<li><a href="scouts_kawellena.html">Kawellen</a></li>
<li><a href="scouts_jonggiversa.html">Jonggivers</a></li>
<li><a href="scouts_giversa.html">Givers</a></li>
</ul>
</li>
<li><a href="#">Praktisch ▼</a>
<ul>
<li><a href="scouts_taf&toetje.html">Taf & Toetje</a></li>
<li><a href="scouts_papierwerk.html">Papierwerk</a></li>
<li><a href="scouts_uniform.html">Uniform</a></li>
<li><a href="scouts_technieken.html">Technieken</a></li>
<li><a href="scouts_jaarthema.html">Jaarthema</a></li>
<li><a href="scouts_rituelen.html">Rituelen</a></li>
</ul>
</li>
<li><a href="scouts_afspraken.html">Algemeen</a></li>
<li><a href="scouts_over.html">Over</a></li>
<li><a href="scouts_fotos.html">Foto's</a></li>
<li><a href="scouts_inschrijven.html">Inschrijven</a></li>
<li><a href="scouts_verhuur.html">Verhuur</a></li>
<li><a href="scouts_contact.htmlv">Contact</a></li>
</ul>
</nav>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%"" >
<div style="font-family: Futura">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
<div class="spacer2"></div>
</div>
<div id="footer">
<img src="logo_Scouts_en_Gidsen_Vlaanderen.png" class="scoutsgidsen"/>
<img src="logo.png" class="logo"/>
</div>
</BODY>
</HTML>
答案 0 :(得分：1)
您正在将悬停规则应用于li，但a元素涵盖了这些规则，因此背景颜色变化无法显示。因此，将悬停规则应用于a元素会更好：
#primary_nav_wrap ul li a:hover代替#primary_nav_wrap ul li:hover
与.current-menu-item类似（我认为你的意思是＆＃34;活跃的课程＆＃34;：
#primary_nav_wrap ul li.current-menu-item a
{
background-color: lawngreen;
color: white;
}
@font-face {font-family: Futura; src: url('FuturaOriginal.ttf');}
@font-face {font-family: FuturaLight; src: url('FuturaLight.ttf');}
@font-face {font-family: FuturaBold; src: url('FuturaBold.ttf');}
BODY {
font-family: FuturaLight;
background: white; color: #333;
align-content: top;
margin: 0;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
#primary_nav_wrap
{
margin-top:100px;
text-align: center;
position: fixed;
width: 100%;
color: white;
border-bottom: 5px solid darkgreen;
background-color: #FFDE46;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
display: inline-block;
margin:0;
padding:0;
color: darkgreen;
}
#primary_nav_wrap ul a
{
display:block;
color: white;
text-decoration:none;
font-weight:700;
font-size:20px;
line-height:32px;
padding:0 15px;
font-family: FuturaBold;
color: white;
background-color: darkgreen;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
color: white;
}
#primary_nav_wrap ul li.current-menu-item a
{
background-color: lawngreen;
color: white;
}
#primary_nav_wrap ul li a:hover
{
background-color: black;
color: white;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background-color: white;
color: darkgreen;
padding:0;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
border: 1px solid #FFDE46;
color: White;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px;
color: White;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%;
color: white;
}
#primary_nav_wrap ul li:hover > ul
{
display:block;
}
.spacer
{
width: 100%;
height: 110px;
}
.side
{
position: fixed;
width: 250px;
border-right-style: solid;
border-width: 5px;
height: 100%;
align-self: left;
float: left;
}
.main
{
width: 100%;
float: left;
}
H1 {
font-size: 60px;
margin-top: 0;
padding-bottom: 50px;
padding-top: 1px;
text-align: center;
list-style-type: none;
position: fixed;
width: 100%;
top: 0;
font-family: FuturaBold;
color: green;
background-color: #FFDE46;
}
/*Opmaak van je header2*/
H2 {
font-family: Futura;
font-size: 40px;
/*Kleur toevoegen*/
color: darkgreen;
/*Tekst centreren*/
text-align:center;
}
/*Opmaak header3*/
H3 {
font-family: Futura;
/*Kleur toevoegen*/
font-size:30px;
color: darkgreen
}
p.futura20{
font-family: Futura;
font-size: 16px
}
p.futura25{
font-family: Futura;
font-size: 20px
}
.spacer2
{
height: 10px;
}
#footer {
margin-bottom: 0px;
align-self: bottom;
height: 200px;
background-color: #FFDE46;
position: relative;
}
.scoutsgidsen {
height: 150px;
position: absolute;
left: 300px;
bottom: 20px;
}
.logo {
height: 150px;
position: absolute;
right: 300px;
bottom: 20px;
}
.avondlied {
font-family: Futura;
font-size: 18px;
text-align: center;
font-weight: 800;
}<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item"><a href="scouts_permeke_site.html">Home</a></li>
<li><a href="scouts_news.html">Nieuws</a></li>
<li><a href="scouts_takken.html">Takken ▼</a>
<ul>
<li><a href="scouts_kapoenen.html">Kapoenen (6-8 jaar)</a></li>
<li><a href="scouts_kawellen.html">Kawellen (8-11 jaar)</a></li>
<li><a href="scouts_jonggivers.html">Jonggivers (11-14 jaar)</a></li>
<li><a href="scouts_givers.html">Givers (14-17 jaar)</a></li>
<li><a href="scouts_leiding.html">Jin, leiding en VT (+17 jaar)</a></li>
</ul>
</li>
<li><a href="scouts_activiteiten.html">Activiteiten ▼</a>
<ul>
<li><a href="scouts_kapoenena.html">Kapoenen</a></li>
<li><a href="scouts_kawellena.html">Kawellen</a></li>
<li><a href="scouts_jonggiversa.html">Jonggivers</a></li>
<li><a href="scouts_giversa.html">Givers</a></li>
</ul>
</li>
<li><a href="#">Praktisch ▼</a>
<ul>
<li><a href="scouts_taf&toetje.html">Taf & Toetje</a></li>
<li><a href="scouts_papierwerk.html">Papierwerk</a></li>
<li><a href="scouts_uniform.html">Uniform</a></li>
<li><a href="scouts_technieken.html">Technieken</a></li>
<li><a href="scouts_jaarthema.html">Jaarthema</a></li>
<li><a href="scouts_rituelen.html">Rituelen</a></li>
</ul>
</li>
<li><a href="scouts_afspraken.html">Algemeen</a></li>
<li><a href="scouts_over.html">Over</a></li>
<li><a href="scouts_fotos.html">Foto's</a></li>
<li><a href="scouts_inschrijven.html">Inschrijven</a></li>
<li><a href="scouts_verhuur.html">Verhuur</a></li>
<li><a href="scouts_contact.htmlv">Contact</a></li>
</ul>
</nav>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%"" >
<div style="font-family: Futura">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
<div class="spacer2"></div>
</div>
<div id="footer">
<img src="logo_Scouts_en_Gidsen_Vlaanderen.png" class="scoutsgidsen"/>
<img src="logo.png" class="logo"/>
</div>
</BODY>
</HTML>