CODEWITHSUNDEEP
javascriptjquerycss
SoftTimur
SoftTimur

Reputation: 5490

Change the background colour of the whole line

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?

JSBin

.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>

Upvotes: 3

Views: 95

Answers (5)

Ionut Necula
Ionut Necula

Reputation: 11472

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>

Upvotes: 3

Ganesh Putta
Ganesh Putta

Reputation: 2671

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>

Upvotes: 1

KarelG
KarelG

Reputation: 5244

The problem is that <ul> has a padding as default, which causes that spacing left to those bullet. If you want, you can override that behavior by removing the bullet and the spacing. This is done by setting the padding to 0. Then if you want to keep the bullets, you can use li:before and add a bullet as content. The unicode of the bullet • is '\2022'. Then add some margin-right and there you go.

I have used .sidebar ul as selector because if you use only ul as selector, then all lists in the document is being affected. It might be not your goal. .sidebar ul means that the <ul> element in an element with the class name "sidebar" is being 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>

Upvotes: 1

Sagar V
Sagar V

Reputation: 12478

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>

Upvotes: 1

LIJIN SAMUEL
LIJIN SAMUEL

Reputation: 883

Try,

.sidebar ul{
  padding: 0;
  margin: 0;
  list-style: none;
 }
 .sidebar ul li{
  padding: 5px;
 }

Upvotes: 1

Related Questions