全宽：嵌套列表的悬停背景？

Question

下面剪辑的html呈现了一个嵌套的元素列表。悬停（鼠标悬停）时，元素背景颜色会发生变化。但是左边的空间没有留下（由于压痕）。

我如何让那个空间也被着色？

我尝试使用absolute将li个定位元素添加到left:0元素。但是那些部分隐藏了li元素的内容：/

ul { 
  list-style: none; 
  padding: 0; 
  margin:0 
}
li { 
  margin:0;
  padding: 0; 
  padding-left: 20px; 
}
li > div:hover { 
  background-color: #eee
}

<div style="position:relative">
  <ul>
    <li><div>Root</div>
      <ul>
        <li><div>A</div>
          <ul>
            <li><div>AA</div></li>
            <li><div>AB</div></li>
          </ul>
        </li>
        <li><div>B</div>
          <ul>
            <li><div>BA</div></li>
            <li><div>BB</div></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

将填充添加到div而不是<li>：

ul { list-style: none; padding: 0; margin:0 }
li { margin:0; padding: 0;}
li > div:hover { background-color: #eee}
li div{padding-left:20px}
li li div{padding-left:40px}
li li li div{padding-left:60px}

演示：http://jsfiddle.net/Madmartigan/MKK8v/

通过在列表项上设置它，您最终也会填充所有子列表项。如果你可以改变你的标记，我认为有更好的方法。

Answer 2

你可以使用这个CSS来让你的div填充缩进，这样空间就不会在：悬停效果上保持无色，然后将溢出设置为隐藏在父包装上。

li div{
  padding-left: 100%;
  margin-left: -100%;
}

这种方式是通用的，因此您可以根据需要拥有尽可能多的子<ul>和<li>标记。以下是JSFiddle的链接，其中包含一个工作示例。

Answer 3

出现问题，因为您已应用padding-left: 20px;，因此Hover不会应用于左侧包含20px padding的部分。

正如我的建议，对于正确的html结构＆amp; css，您必须将类或 ID 名称分配给<li>＆amp; <div>元素，因为您可以轻松检测问题＆amp;得到强大的结构。

Answer 4

您可以从li元素中删除padding-left并使用jquery向div添加padding-left，如下所示：

$("li>div").each(function(i, div){
              var $li = $(div).parent();
              var parentCount= $li.parents("li").length;
              var padding = parentCount*20;
              $(div).css("paddingLeft", padding + "px");
            });

Demo

Answer 5

我认为这里最简单的方法是将填充和悬停背景放在div元素上。它对你的树嵌套级别设置了一个令人讨厌的硬限制，因为你必须编写尽可能多的CSS规则，但是......不管怎样，你的内容宽度可能会有一个水平限制。

ul, li
{
    margin: 0;
    padding: 0;
}

ul div:hover {
    background: #eee;
}

ul ul div { padding-left: 20px; }
ul ul ul div { padding-left: 40px; }
ul ul ul ul div { padding-left: 60px; }
/* et cetera*/

Answer 6

可以使用jQuery实现。

我使用了一个看不见的div，它将自己定位在li上，并填充整个宽度

$(document).ready(function() {

  $('li > div').hover(function(event) {

      $("div#liSelect").show();
      $("div#liSelect").css('height', $(this).height() + "px");
      $("div#liSelect").css('top', $(this).position().top + "px");
      event.stopPropagation();
    },
    function() {
      $('div#liSelect').hide();
    });
})

body {
  margin: 0px;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  margin: 0;
  padding: 0;
  padding-left: 20px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div style="position: relative">
  <div id='liSelect' style='display:none;width:100%;height:100%;position:absolute;left:0px;opacity:0.3;background-color:#555;pointer-events:none;'></div>
  <ul>
    <li>
      <div>Root</div>
      <ul>
        <li>
          <div>A</div>
          <ul>
            <li>
              <div>AA</div>
            </li>
            <li>
              <div>AB</div>
            </li>
          </ul>
        </li>
        <li>
          <div>B</div>
          <ul>
            <li>
              <div>BA</div>
            </li>
            <li>
              <div>BB</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 7

使用CSS会更好，但使用jQuery可以：

根据级别向div添加填充。

$('li').each((i, el) => {
   $(el).children('div').css('padding-left', 30 * $(el).parents('ul').length)
});

https://jsfiddle.net/9ydr6b6z/

Answer 8

请使用此CSS代码而不是您的代码。

ul { 
    list-style: none; 
    padding: 0; 
    margin:0 
}

li > div:hover { 
    background-color: #eee
}

li div { 
    padding-left: 20px; 
}

li li div { 
    padding-left: 40px; 
}

li li li div { 
    padding-left: 60px; 
}

Answer 9

尝试找到我尝试使用CSS Counters的通用解决方案。不幸的是，似乎只能在content属性中使用计数器。

也许有人可以弄清楚如何使用计数器来获取相应的padding-left ...

＆＃13;

＆＃13;

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-increment: level;
}

ul:after {
  content: "";
  counter-increment: level -1;
}

li div:hover {
  background-color: #ddd;
}

li div {
  padding-left: calc(20px * counter(level));
}

li div:before { /* Just for debugging purposes */
  color: #bbb;
  content: counter(level)" ";
}

＆＃13;

<div style="position:relative">
  <ul>
    <li><div>Root</div>
      <ul>
        <li><div>A</div>
          <ul>
            <li><div>AA</div></li>
            <li><div>AB</div></li>
          </ul>
        </li>
        <li><div>B</div>
          <ul>
            <li><div>BA</div></li>
            <li><div>BB</div></li>
            <li><div>BC</div>
              <ul>
                <li><div>BCA</div></li>
                <li><div>BCB</div></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><div>C</div></li>
      </ul>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;