老师，遇到一个问题。
# 具体遇到的问题
使用a:hover达不到使用li:hover的效果
# 报错信息的截图
li:hover的效果
a:hover的效果
# 相关课程内容截图
# 尝试过的解决思路和结果
因为使用a:hover达不到视频的效果，所以就用li:hover，结果li:hover能达到效果，就很迷惑，我这个是什么原因造成的呢。因为看视频，加在a:hover是可以的，我自己加就出现问题了！
我将nav ul li:hover换成nav ul a:hover
就存在问题了
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
nav{
width: 1000px;
height: 50px;
margin: 40px auto;
}
nav ul{
list-style: none;
}
nav ul li{
float: left;
width: 20%;
text-align: center;
line-height: 50px;
background-color: orange;
}
nav ul li a {
display: block;
text-decoration: none;
color: #fff;
}
nav ul li:hover{
position: relative;
border-top: 3px solid red;
top: -3px;
background-color: burlywood;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
</ul>
</nav>
</body>
</html>
正在回答
同学你好，给a设置hover样式之后，效果不一样的原因如下：
这是因为a没有浮动脱离文档流，可以撑开父元素高度。a实际高度为53px（包含边框），所以父元素li撑开的高度也是53px。li自身设置了橙色背景，所以当鼠标移入a，a往上移动3px，就会露出来3px的空间，此时露出最底下高度为3px的橙色背景就是li的。
给li设置hover样式没有问题，是因为它的父元素高度塌陷（因为li自身是浮动的）。例如给父元素设置高度，并设置一个橙色背景，也会出现上面的问题，如下：
解决方式就是像视频中一样，给li设置一个固定高度，如下：
li设置固定高度50px，会比a少3px，这样a往上移动3px，也不会露出来li的背景：
效果如下：
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星