Change the background color of an entire row
I want to implement the sidebar of a regular editor: when we hover over one filename, the entire line changes to a darker background color.
However, if the filenames are specified in <ul>
, the following code only changes the background color for <li>
, does anyone know how to change the background color for the entire 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>
source to share
In fact, the entire line changes. The problem is the default padding on the element ul
, if you remove that you can see what happens. Now you need to add list-style-position: inside;
to keep the bullets inside if you need to. You can also add padding-left: 20px;
to the element li
to get to the same position as when filling on ul
. See snippet below:
.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>
source to share
The problem is with the newsletter and supplement.
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>
source to share
The problem is that it <ul>
has a default which causes the distance to that bullet to remain. If you wish, you can reverse this behavior by removing the bullet and interval. This is done by setting it padding
to 0. Then, if you want to save the bullets, you can use li:before
and add the bullet as content. Bullet unicode •
is '\2022'
. Then add a little margin-right
and there you go.
I used it .sidebar ul
as a selector because if you only use it ul
as a selector then all the lists in the document will be affected. This may not be your goal. .sidebar ul
means that the element <ul>
in the element named "sidebar" of the class is selected to apply these rules .
.sidebar {
width: 102px;
background-color: #f3f3f3
}
li:hover {
background-color: #cccedb
}
.sidebar ul {
padding: 0;
}
.sidebar li:before {
content: '\2022';
margin-right: 2px;
}
<div class="sidebar">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
source to share
ul, li{
padding:0px;
/* you need to remove default padding of ul */
}
.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>
source to share