我根据在网上找到的教程创建了一个菜单,我希望能更进一步。我想让每个链接完全更改为单击时指定的背景颜色。我尝试使用 a:active 但这似乎不起作用。这是我到目前为止所拥有的,也许我需要使用一些 J-Query?这是小提琴和代码
<div style="width: 1000px; margin: 0 auto; text-align:center; ">
<ul id="menu">
<li><a class="anchor" href="#welcomeanchor">Home</a></li>
<li><a class="anchor" href="#aboutusanchor">About Us </a></li>
<li><a class="anchor" href="#classesanchor">Classes </a> </li>
<li><a class="anchor" href="#scheduleanchor">Schedule</a></li>
<li><a class="anchor" href="#newsanchor">News</a></li>
<li><a class="anchor" href="#programsanchor">Programs</a></li>
<li><a class="anchor" href="#contactanchor">Contact</a></li>
</ul></div>
CSS
#menu {
width: 940px;
margin: 0 auto;}
ul li {
background:#000;
list-style: none;
height: 50px;
float:left;
padding:0 0;
}
ul li a {
font-family: font3;
width: 134px;
height: 50px;
line-height: 53px;
border-bottom: 6px solid #636393;
color: #fff;
font-size:13px;
text-transform: uppercase;
text-align:center;
text-decoration: none;
display: block;
-webkit-transition: .2s all linear;
-moz-transition: .2s all linear;
-o-transition: .2s all linear;
transition: .2s all linear;
}
li:nth-child(1) a {
border-color: #fff;
}
li:nth-child(2) a {
border-color: #FF6;
}
li:nth-child(3) a {
border-color: #F60;
}
li:nth-child(4) a {
border-color: #00F;
}
li:nth-child(5) a {
border-color: #0C6;
}
li:nth-child(6) a {
border-color: #63C;
}
li:nth-child(7) a {
border-color: #F00;
}
li:nth-child(1) a:hover {
color: #000;
border-bottom: 55px solid #fff;
height: 1px;
}
li:nth-child(2) a:hover {
color: #000;
border-bottom: 55px solid #ff6;
height: 1px; }
li:nth-child(3) a:hover {
border-bottom: 55px solid #f60;
height: 1px; }
li:nth-child(4) a:hover {
border-bottom: 55px solid #00f;
height: 1px; }
li:nth-child(5) a:hover {
border-bottom: 55px solid #0c6;
height: 1px; }
li:nth-child(6) a:hover {
border-bottom: 55px solid #63c;
height: 1px; }
li:nth-child(7) a:hover {
border-bottom: 55px solid #f00;
height: 1px; }