Question

我创建了一个简单的垂直导航栏。在悬停时，li和a的背景颜色会发生变化。当悬停在li的右侧（在锚文本之后）时，一切正常，但当悬停在li的左侧（锚文本之前）时，锚文本变得不可见（因为锚文本悬停样式不会被解雇。

我尝试删除.nav-container ul{padding-left:0px;}，而是将display: incline-block添加到a本身，但没有任何变化。

这是一个显示我当前方法并展示问题的小提琴：https://jsfiddle.net/cf4fe8aL/

Answer 1

替换此css：

.nav-container li a:hover {
color: #333;
}

使用：

.nav-container li:hover a{
  color: #333;
}

编辑1：

.nav-container {
	border-right: 0.5px solid #333;
	width: 250px;
	float: left;
	background-color: #333;
	height: 100%;
  
}
.nav-container ul{
	width: 100%;
	padding-left:0px;
}
.nav-container ul li {
	list-style-type: none;
	width: 100%;
}
.atag {
  width : 100%;
	display: block;
	text-align: left;
	color: #fff;
	text-decoration: none;
	margin-left: 0px;
	padding-left:15px;
}
.atag:hover {
	background-color: #fff;
  color:#333;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

</head>
<body>
<nav class="nav-container">
						<ul>
							<a class="atag" href="#"><li class="nav-link active">Home</li></a>
							<a class="atag" href="#"><li class="nav-link active">Blog</li></a>
							<a class="atag" href="#"><li class="nav-link active">Store</li></a>
							<a class="atag" href="#"><li class="nav-link active">Contact</li></a>
						</ul>
					</nav>
</body>
</html>

列表中的锚链接确实跨越整个列表

1 个答案: