<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 3 年前。
html - 他们是如何制作 a :hover full background color
我正在使用 a:hover 创建布局侧边栏。我如何将背景颜色设置为充满div？为什么这段代码不起作用？
<style>
#header{
background-color: cornflowerblue;
height: 10%;
font-size: 1.5em;
text-align: center;
padding-top: 20px;
}
#sidebar{
background-color: deepskyblue;
height: 5%;
width: 100%;
font-size: 12px;
padding-top: 2px;
}
#content{
background-color: dodgerblue;
width: 100%;
height: 400px;
font-size: 1.5em;
text-align: center;
padding-top: 20px;}
#footer{background-color: darkblue;
clear: both;
font-size: 1.5em;
text-align: center;
}
a {text-decoration: none;
color: white;}
a:active {font-size: 10px;}
li{display: inline;
margin-right: 10px;}
</style>
<div id="header">
HEADER
</div>
<div id="sidebar">
<ul>
<a href=""> <li>Home</li></a>
<a href=""><li>Annoucement</li></a>
<a href=""><li>ReportList</li></a>
<a href=""><li>Settings</li></a>
</ul>
</div>
<div id="content">
CONTET
</div>
<div id="footer">
FOOTER
</div>
这个脚本有什么问题吗，当我们将鼠标指向列表(悬停)时，它会显示背景颜色穿过侧边栏div
最佳答案
ul 有默认边距。将 margin 更改为 0 并提供 height
ul {
margin:0;
height :40px;
display :flex;
}
解决方法:
#header{
background-color: cornflowerblue;
height: 10%;
font-size: 1.5em;
text-align: center;
padding-top: 20px;
}
#sidebar{
background-color: deepskyblue;
height: 5%;
width: 100%;
font-size: 12px;
}
#content{
background-color: dodgerblue;
width: 100%;
height: 400px;
font-size: 1.5em;
text-align: center;
padding-top: 20px;}
#footer{
background-color: darkblue;
clear: both;
font-size: 1.5em;
text-align: center;
}
a {
text-decoration: none;
color: white;
height:100%;
display: flex;
align-items: center;
}
a:active {font-size: 10px;}
li{
display: inline;
margin-right: 10px;
}
a:hover {
color: black;
background: dimgray;
}
ul {
margin:0;
height :40px;
display :flex;
}<div id="header">
HEADER
</div>
<div id="sidebar">
<ul>
<a href=""> <li>Home</li></a>
<a href=""><li>Annoucement</li></a>
<a href=""><li>ReportList</li></a>
<a href=""><li>Settings</li></a>
</ul>
</div>
<div id="content">
CONTET
</div>
<div id="footer">
FOOTER
</div>关于html - 他们是如何制作 a :hover full background color，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57679807/