关于active和hover的问题

老师我无论是单独运用hover和action还是一起用，都没有效果，如果改变我主页面上的<a class="Home" href="imooc.html">Home</a>变成<a class="Home action" href="imooc.html">Home</a>之后就完全没有了action的效果就变成了类似

header>.container>nav>a.Home {

padding-bottom: 7px;

}

的效果，这样我用action和hover不是完全是用个名称而已，而没有实际意义。这是个空壳啊，很烦恼，求解答，蓝瘦

sugaro 2017-03-27

源自：HTML5网页布局 2-1 html5页面布局（表现层_header）

收起

2回答

樱桃小胖子回答被采纳获得+3积分 2017-03-27 22:20:01

header>.container>nav>a.Home {}

设置的是class类为Home的样式，而

header>.container>nav>a.action {}

则是设置默认选中的样式，而hover设置的是鼠标滑过的样式，譬如

header>.container>nav>a:hover{}

祝学习愉快~

收起回答

sugaro 提问者 #1

谢谢老师的解答，那个主页面HTML“Home Action"是6个部分都要“Action”这个类吗？感觉加这个类反而累赘，不是应该默认 CSS 中a.action 是指选中效果吗？HTML不加“action”更好理解，还有hover也是要在HTML中加进去？也是每个都要加？

2017-03-27 22:28:43
sugaro 提问者 #2

非常感谢！

2017-03-28 12:56:14

樱桃小胖子 2017-03-28 14:25:59

<!doctype html>
<html>

<head>
<meta charset="UTF-8" />
<title></title>
<style>
*{
padding:0;
margin:0;
}
header {
width: 100%;
height: 70px;
background: #000;
line-height:70px;
}
.container{
width:1200px;
margin:0 auto;
}
nav {
float: right;
}

nav > a{
float:left;
display:inline-block;
height:63px;
padding: 0 10px;
text-decoration:none;
color:#fff;
}
nav > a.Home{
background:green;
}
nav > a.Contact{
background:blueviolet;
}
nav > a.Team{
background:yellow;
}
nav > a.Phone{
background:orange;
}
nav > a.action,nav > a:hover{
padding-bottom:7px;
}
/*
① nav > a.active表示默认第一个class类带有active的默认呈现选中效果
② nav > a:hover表示鼠标滑过每一个a标签的效果
两者的区别：
:hover是css的特有属性，叫做伪类；
.action表示HTML的某一个标签的class类叫做action
*/
</style>
</head>

<body>
<header>
<div>
<a href="#">logo</a>
<nav>
<a class="Home action" href="#">Home</a>
<a href="#">Contact</a>
<a href="#">Team</a>
<a href="#">Phone</a>
</nav>
</div>
</header>
</body>
</html>

祝学习愉快~

收起回答