Question

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

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

＆＃13;

.sidebar {
  width: 102px;
  background-color: #f3f3f3
}

li:hover {
  background-color: #cccedb
}

＆＃13;

<div class="sidebar">
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>

＆＃13;

Answer 1

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

＆＃13;

.sidebar {
  width: 102px;
  background-color: #f3f3f3;
}
li{
  padding-left: 20px;
}
li:hover {
  background-color: #cccedb;
}
ul{
  padding: 0;
  list-style-position: inside;
}

＆＃13;

<div class="sidebar">
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>

＆＃13;

Answer 2

尝试，

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

Answer 3

问题在于公告和填充。

将其添加到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>

Answer 4

问题是<ul>默认有一个填充，导致该间距留给那些子弹。如果需要，可以通过删除项目符号和间距来覆盖该行为。这可以通过将padding设置为0来完成。然后，如果要保留项目符号，可以使用li:before并添加项目符号作为内容。子弹•的unicode是'\2022'。然后添加一些margin-right，然后你去。

我使用.sidebar ul作为选择器，因为如果仅使用ul作为选择器，则文档中的所有列表都会受到影响。这可能不是你的目标。 .sidebar ul表示元素中<ul>元素的类名为＆＃34; sidebar＆＃34;正在被选中来应用这些规则。

＆＃13;

.sidebar {
  width: 102px;
  background-color: #f3f3f3
}

li:hover {
  background-color: #cccedb
}

.sidebar ul {
  padding: 0;
}

.sidebar li:before {
  content: '\2022';
  margin-right: 2px;
}

＆＃13;

<div class="sidebar">
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>

＆＃13;

Answer 5

＆＃13;

Cl

＆＃13;

ul, li{
  padding:0px;
   /* you need to remove default padding of ul */
}
.sidebar {
  width: 102px;
  background-color: #f3f3f3
}

li:hover {
  background-color: #cccedb
}

＆＃13;

更改整行

5 个答案: