I want to realise the sidebar of a normal editor: when we hover on one filename, the whole line changes to a darker background colour.
However, given the filenames are listed by <ul>, the following code only changes the background colour for <li>, does anyone know how to change the background colour for the whole line where the hover is?
.sidebar {
width: 102px;
background-color: #f3f3f3
}
li:hover {
background-color: #cccedb
}<div class="sidebar">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>Actually the whole line is changed. The problem is the default padding on the ul element, if you remove that you can see what happens. You now have to add list-style-position: inside; to keep the bullets inside if you need. You can also add padding-left: 20px; to the li element to get in the same position like when you had padding on ul. See the snippet below please:
.sidebar {
width: 102px;
background-color: #f3f3f3;
}
li{
padding-left: 20px;
}
li:hover {
background-color: #cccedb;
}
ul{
padding: 0;
list-style-position: inside;
}<div class="sidebar">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>Try,
.sidebar ul{
padding: 0;
margin: 0;
list-style: none;
}
.sidebar ul li{
padding: 5px;
}
The issue is with the bulletin and padding.
add this to ul
list-style-type:none;
padding:0px;
.sidebar {
width: 102px;
background-color: #f3f3f3
}
ul{
list-style-type:none;
padding:0px;
}
li:hover {
background-color: #cccedb
}<div class="sidebar">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>