我正在写一个响应式网站。我的菜单有一个悬停效果（当你用鼠标悬停在它上面时，它会亮起来）。问题是单击后的菜单项会在点击后点亮。
实施例： 您第一次加载页面。一切正常。单击“关于”。关于点亮，你得到about.html（目前仍然是旧页面）。您将返回索引页面。菜单中的关于仍然亮起，即使它不应该。为什么会这样？
我已将该页面已在线，以进行测试。点击这里： http://www.s4ea.org/new/index.html
HTML：
<nav>
<ul>
<li class="home"><a href="http://www.s4ea.org/index.htm" target="_blank">Home </a></li>
<li class="about"><a href="http://www.s4ea.org/about.htm" target="_blank">About Us </a></li>
<li class="sports"><a href="http://www.s4ea.org/sports.htm" target="_blank">Sports </a></li>
<li class="news"><a href="http://www.s4ea.org/news.htm" target="_blank" >News & Events </a></li>
<li class="vols"><a href="http://www.s4ea.org/volunteer.htm" target="_blank" >Volunteer </a></li>
<li class="donate"><a href="http://www.s4ea.org/donations.htm" target="_blank" >Donate </a>
<ul>
<li><a href="http://www.s4ea.org/paypal.htm">Donate using PayPal</a></li>
<li><a href="http://www.s4ea.org/checks.htm">Donate using Check</a></li>
<li><a href="http://www.s4ea.org/car.htm">Donate Your Car</a></li>
<li><a href="http://www.s4ea.org/unitedway.htm">United Way Gift</a></li>
<li><a href="http://www.s4ea.org/goodsearch.htm">Donate using GoodSearch</a></li>
<li><a href="http://www.s4ea.org/sponsors.htm">Our Sponsors</a></li>
<li><a href="http://www.s4ea.org/sponsorship.htm">Sponsorship</a></li>
<li><a href="http://www.s4ea.org/Inkind.htm">Inkind Needs</a></li>
</ul>
</li>
<li class="contact"><a href="http://www.s4ea.org/contact.htm" target="_blank">Contact Us </a></li>
<li class="events"><a href="#events" >Upcoming Events </a></li>
<li class="camps"><a href="#camp" >SPORTS Camps </a></li>
<li class="fundraisers"><a href="#fundraisers" >Fundraisers </a></li>
</ul>
</nav>
</header>
CSS：
.mainheader nav {
background-color: #FFF;
height:10%;
}
.mainheader nav ul {
list-style:none;
margin: 0 auto;
padding:0%;
background-color: #FFF;
}
.mainheader nav ul li {
float:left;
display: inline;
width:14.28%;
padding: 0% ;
font-size: 20px;
text-align:left;
overflow:hidden;
}
.mainheader nav a:link, .mainheader nav a:visited {
color:#FFF;
display:inline-block;
text-align: 0 auto;
/*padding:10px 25px 10px 25px;*/
padding:17.5px 0px 17.5px 0px;
height: 40px;
}
/* war hier .mainheader nav a:hover, .mainheader nav a:active, */
.mainheader nav .home a:link, .mainheader nav .home a:visited {
background-color:#ffcc00; /*Farbe nicht Hover */
text-shadow: none;
float:left;
overflow:hidden;
}
.mainheader nav .home a:visited, .mainheader nav .home a:hover {
background-color:#ffe66a; /*Farbe Hover */
overflow:hidden;
}
.mainheader nav .about a:link, .mainheader nav .about a:visited {
background-color:#7ab503; /*Farbe nicht Hover */
text-shadow: none;
}
.mainheader nav .about a:visited, .mainheader nav .about a:hover {
background-color:#bffc43; /*Farbe Hover */
}
.mainheader nav .sports a:link, .mainheader nav .sports a:visited {
background-color:#e47412; /*Farbe nicht Hover */
text-shadow: none;
}
.mainheader nav .sports a:visited, .mainheader nav .sports a:hover {
background-color: #f3a157; /*Farbe Hover */
}
.mainheader nav .news a:link, .mainheader nav .news a:visited {
background-color:#00a3d1; /*Farbe nicht Hover */
text-shadow: none;
}
.mainheader nav .news a:visited, .mainheader nav .news a:hover {
background-color: #6cdfff; /*Farbe hover*/
text-shadow: none;
}
.mainheader nav .vols a:link, .mainheader nav .vols a:visited {
background-color:#eb10cf; /*Farbe nicht Hover */
text-shadow: none;
}
.mainheader nav .vols a:visited, .mainheader nav .vols a:hover{
background-color: #fb6ce9; /*Farbe hover*/
text-shadow: none;
}
.mainheader nav .donate a:link, .mainheader nav .donate a:visited {
background-color:#e82d24; /*Farbe nicht Hover */
text-shadow: none;
}
.mainheader nav .donate a:visited, .mainheader nav .donate a:hover {
background-color:#f28b86; /*Farbe Hover */
text-shadow:none;
}
.mainheader nav .donate ul {
display:none;
position: absolute;
height: auto;
overflow:visible;
}
.mainheader nav .donate ul li {
clear: both;
overflow:visible;
width: 100%;
}
/* clear: both; Bei der Verwendung dieses Befehls: Ist untereinander, aber es gibt einen Fehler.
*/
.mainheader nav .donate ul li a {
height:15px;
}
.mainheader nav .donate:hover ul {
display: block;
background-color: #e82d24;
}
.mainheader nav .donate:hover ul li:hover {
background-color:#f28b86;
}
.mainheader nav .contact a:link, .mainheader nav .contact a:visited {
background-color:#7cb703; /*Farbe nicht Hover */
text-shadow: none;
}
.mainheader nav .contact a:visited, .mainheader nav .contact a:hover {
background-color:#bffd43; /*Farbe Hover */
text-shadow:none;
}
.mainheader nav .events a:link, .mainheader nav .events a:visited {
background-color:#eb10cf; /*Farbe nicht Hover */
text-shadow: none;
display:none;
}
.mainheader nav .events a:visited, .mainheader nav .events a:hover {
background-color:#6cdfff; /*Farbe Hover */
text-shadow:none;
display:none;
}
.mainheader nav .camps a:link, .mainheader nav .camps a:visited {
background-color:#ffcc00; /*Farbe nicht Hover */
text-shadow: none;
display:none;
}
.mainheader nav .camps a:visited, .mainheader nav .camps a:hover {
background-color:#ffe66a; /*Farbe Hover */
text-shadow:none;
display:none;
}
.mainheader nav .fundraisers a:link, .mainheader nav .fundraisers a:visited {
background-color:#00a3d1; /*Farbe nicht Hover */
text-shadow: none;
display:none;
}
.mainheader nav .fundraisers a:visited, .mainheader nav .fundraisers a:hover {
background-color:#6cdfff; /*Farbe Hover */
text-shadow:none;
display:none;
}
非常感谢!!!
评论：我知道页面真的不完美，现在只是一个测试，我知道菜单远非专业。
答案 0 :(得分：0)
您为链接的:hover和:visited事件设置了相同的背景颜色。因此，在您点击链接后，它将保持与悬停时相同的颜色。
从CSS选择器中删除a:visited，你应该没问题。
答案 1 :(得分：0)
问题在于其中一个：css中访问过的部分。它将颜色设置为与a：hover相同，因此在您点击链接后将其标记为已访问并保持该颜色。如果您在无法存储访问的隐身模式浏览器上进行测试，则链接不会保持相同的颜色。我会仔细查看，看看能不能找到哪一个。