html - 菜单一直是 "clicked"。悬停效果出错

Question

我正在编写一个响应式网站。我的菜单有悬停效果(当你用鼠标悬停在它上面时，它会亮起)。问题是单击菜单项后，它们会一直亮着。

例子:您第一次加载页面。一切正常。你点击“关于”。 About 亮起，您将转到 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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a></li>
        <li class="about"><a href="http://www.s4ea.org/about.htm"  target="_blank">About Us&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a></li>
        <li class="sports"><a href="http://www.s4ea.org/sports.htm"  target="_blank">Sports&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a></li>
        <li class="news"><a href="http://www.s4ea.org/news.htm" target="_blank" >News & Events&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a></li>
        <li class="vols"><a href="http://www.s4ea.org/volunteer.htm" target="_blank" >Volunteer&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a></li>
        <li class="donate"><a href="http://www.s4ea.org/donations.htm" target="_blank" >Donate&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a></li>  
        <li class="events"><a href="#events" >Upcoming Events&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a></li>
        <li class="camps"><a href="#camp" >SPORTS Camps&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</a></li>  
        <li class="fundraisers"><a href="#fundraisers" >Fundraisers&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</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;

}

非常感谢!!!

评论:我知道页面确实不完美，目前只是测试，我知道菜单远非专业。

Answer 1

您正在为链接的 :hover 和 :visited 事件设置相同的背景颜色。因此，在您点击链接后，它会保持悬停时的颜色。

从 CSS 选择器中删除 a:visited，您应该没问题。