我正在努力使链接的整个长度改变背景颜色，但只有文本后面的背景会改变。
html如下:
<DOCTYPE! HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="dropdwn.css">
</head>
</body>
<div class="dropdown">
<h1><a href="#">Dropdown Box</a></h1>
<ul class="content">
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
<li><a href="#">List Item</a></li>
</ul>
</div>
</body>
</html>
CSS 在下面，我已经尝试更改许多类的填充，但似乎无法实现。
body {
}
.dropdown {
position: absolute;
}
.dropdown h1 {
background-color: #62dbfc;
font-family: "calibri light";
padding: 15px 35px;
margin: 0 auto;
font-size: 36px;
}
.content {
display: none;
}
.dropdown ul {
margin: 0 auto;
position: absolute;
width: 100%;
padding-left: 0;
}
.dropdown li {
list-style-type: none;
background-color: #ededed;
margin: 0 auto;
font-family: calibri;
text-align: center;
padding: 15px 0px;
}
.dropdown a {
text-decoration: none;
color: black;
font-size: 36px;
}
.dropdown:hover .content {
display: block;
}
.content a:hover {
background-color: #c4c4c4;
}
最佳答案
更改您要将 :hover 附加到的内容，它应该突出显示整个 li 元素。
.content li:hover {
background-color: #c4c4c4;
}
关于html - 滚动时如何使链接的整个背景发生变化而不仅仅是文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43725215/