老师,我实现鼠标经过效果时用a.active实现不了但可以用a:hover实现是什么原因?
来源:2-2 编程练习
Redamancy_Y6
2019-12-12 21:52:20
<!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://climg.mukewang.com/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;}
2回答
同学你好,在回复一中提到了哦,如下:
因为a.active原本就有padding-bottom: 10px;的属性,再在a.active:hover设置的话,属性会覆盖,效果看不出来,所以要设置除了10之外的数字。
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
好帮手慕码
2019-12-13
同学你好,请问你是说如下代码无法实现效果吗?
测试是可以的,效果:
如果我的回答帮到了你,欢迎采纳,祝学习愉快~
相似问题