javascript - 改变整行的背景颜色

Question

我想实现一个普通编辑器的侧边栏:当我们将鼠标悬停在一个文件名上时，整行的背景颜色会变深。

但是，鉴于文件名由 <ul> 列出, 以下代码仅更改 <li> 的背景颜色, 有谁知道如何更改悬停所在整行的背景颜色？

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>

Answer 1

实际上整行都变了。问题是 ul 元素上的默认填充，如果您删除它，您可以看到会发生什么。如果需要，您现在必须添加 list-style-position: inside; 以将元素符号保留在内部。您还可以将 padding-left: 20px; 添加到 li 元素，以获得与在 ul 上填充时相同的位置。请看下面的片段:

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