关于a.active
来源：2-1 html5页面布局（表现层_header）
蛋挞狂魔
2020-12-01 16:47:29
# 具体遇到的问题
导航栏实现效果为什么使用a.active而不是a:hover？
两者效果有区别吗？
a.avtive是不是指a标签中类名带有active的？
但是我看到老师只给第一个home类名加上了active，鼠标悬停在所有导航项却都有效果。请问这是为什么？
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
写回答
1回答
-
同学你好， 对于你的问题解答如下:
视频中是两者结合一起实现默认第一项高度铺满整个导航项，鼠标移入改变其他导航项高度的效果，具体可以参考后面的解析。
只给第一个导航项添加了active类，设置默认样式，如下图所示：
打开页面后，只有第一个导航项高度填充满整个导航条
鼠标移入改变导航项实际占据的高度。
两者的区别如下：
（1）a.active表示选择类名为active的a标签
（2）a:hover表示给所有的a标签添加伪类，设置鼠标移入元素时的样式。
因为老师使用了组合选择器，将a:hover和a.acitve样式写在一起了，所以添加acitve类的a标签高度填充满整个导航条，鼠标移入导航条时，整体高度也会发生改变。
祝学习愉快~
0
相似问题
a.active没有反应
回答 2