老师，我实现鼠标经过效果时用a.active实现不了但可以用a:hover实现是什么原因？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>IMOOC</title> <link href="homework.css" rel="stylesheet" type="text/css"/> </head> <body> <!-- 在此完成网页的HTML代码--> <header> <div class="container"> <a href="index.html"> <img src="http://img1.sycdn.imooc.com/climg//582e5f160001b17100400040.png"> </a> <p><a href="#">MYMOCC</a> </p> <nav> <a class="Home active" href="#">Home</a> <a class="Course" href="#">Course</a> <a class="Actual" href="#">Actual</a> <a class="Plan" href="#">Plan</a> <a class="FAQ" href="#">FAQ</a> <a class="Notes" href="#">Notes</a> </nav> </div> </header> </body> </html>
*{
padding: 0;
margin: 0;
font-family: Arial;
border: none;
}
a{
color: #fff;
text-decoration: none;
}
header{
background: #000;
height: 90px;
width: 100%;
}
header > .container{
width: 1200px;
margin: 0 auto;
overflow: hidden;
*zoom:1;
}
header > .container > a{
display: block;
float: left;
margin:20px 5px;
}
header > .container > p{
float: left;
margin:40px 0px;
color: #fff;
text-decoration: none;
font-size: 20px;
}
header > .container > nav{
float: right;
line-height: 80px;
}
header > .container > nav a{
display: block;
width: 70px;
height: 80px;
float: left;
text-align: center;
}
header > .container > nav > a.Home{background: #d40;}
header > .container > nav > a.Course{background: #feb800;}
header > .container > nav > a.Actual{background: #78b917;}
header > .container > nav > a.Plan{background: #433b90;}
header > .container > nav > a.FAQ{background: #f27c01;}
header > .container > nav > a.Notes{background: #017fcb;}
header > .container > nav > a.active {padding-bottom: 10px;}
正在回答
同学你好，在回复一中提到了哦，如下：
因为a.active原本就有padding-bottom: 10px;的属性，再在a.active:hover设置的话，属性会覆盖，效果看不出来，所以要设置除了10之外的数字。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星