老师,我实现鼠标经过效果时用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回答

好帮手慕码

2019-12-13

同学你好,在回复一中提到了哦,如下:

http://img.mukewang.com/climg/5df2f4ae09cadb1105780122.jpg

因为a.active原本就有padding-bottom: 10px;的属性,再在a.active:hover设置的话,属性会覆盖,效果看不出来,所以要设置除了10之外的数字

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

0
hedamancy_Y6
h 这样啊,谢谢老师!
h019-12-13
共1条回复

好帮手慕码

2019-12-13

同学你好,请问你是说如下代码无法实现效果吗?

http://img.mukewang.com/climg/5df2f262092f002705920130.jpg

测试是可以的,效果:

http://img.mukewang.com/climg/5df2f27009e7763002250114.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

0
hedamancy_Y6
h 老师,为什么不能写外下边框为10px,要写20px呢?
h019-12-13
共1条回复

0 学习 · 40143 问题

查看课程