菜单不断被“点击”。悬停效果出错

Question

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

示例： 您第一次加载页面。一切正常。你点击“关于”。 About 会亮起，然后你会看到 about.html（目前仍然是旧页面）。您返回到索引页面。菜单中的 About 仍然亮着，即使它不应该亮着。为什么会这样？

我的页面已经在线，用于测试。点击这里： 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 就可以了。

Answer 2

问题在于 css 中的 a:visited 部分之一。它将颜色设置为与 a:hover 相同，因此在您单击链接后，它被标记为已访问并将保持该颜色。如果您在不存储访问过的隐身模式浏览器上进行测试，则链接不会保持相同的颜色。我会看一下，看看我能不能找到哪个在做。