3

我有一个这样的嵌套列表：

   <ul class="tree">
     <li><div>Animals</div>
       <ul>
         <li><div>Birds</div>
           <ul>
             <li class="last"><div>Eagle</div></li>
           </ul>
         </li>
         <li><div>Mammals</div>
           <ul>
             <li><div>Elephant</div></li>
             <li class="last"><div>Cats</div>
               <ul>
                 <li><div>Lion</div></li>
                 <li class="last"><div>Tiger</div></li>
               </ul>
             </li>
           </ul>
         </li>
         <li class="last"><div>Reptiles</div>
           <ul>
             <li><div>Snake</li>
             <li class="last"><div>Turtle</div></li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>

我想设置这样的样式，以便每个级别都缩进，但我也希望在悬停时突出显示每一行。当我将鼠标悬停在 上DIV时，突出显示仅从包含的左侧位置开始UL：

  ul.tree, ul.tree ul {
    list-style-type: none;
  }

  ul.tree li div:hover {
    background-color: red;
  }

有没有什么方法可以达到我想要的效果，而无需为 , 等定义多个li li规则li li li？嵌套层数可能是无限的，所以我觉得定义所有这些不同的规则非常难看。

或者有没有办法动态计算嵌套级别（在 CSS 中？），所以我可以删除填充，UL而是在每个内部放置适量的填充DIV？

更新：

添加了一个显示我想要的小提琴：http: //jsfiddle.net/za3db/

你可以看到它只在第二级缩进，因为我没有定义第三级或第四级的规则......

4

3 回答 3

0

我无法用 CSS 来完成，但可以用一点 javascript (jQuery) 来完成。

$(".tree div").each(function()
{
    var padding = $(this).parents("ol, ul").length * 20 + "px";

    $(this).css("padding-left", padding);
});

看到这个 jsFiddle

于 2013-10-29T17:07:29.007 回答
0

这有点是你想要的：http: //jsfiddle.net/za3db/4/

它在您的每个sleft:0; right:0下 ( ) 放置一个绝对定位 ( ) 伪元素。但是这种结构有两个缺点：z-index:-1div

  • 它仅在您知道 div 的高度时才有效（在我的示例中始终1.3em= line-height）
  • 当您将鼠标悬停在缩进上时它不会突出显示，因为 div 仍然没有从左侧开始。

所以最好的解决方案可能仍然是 javascript 或者只是写下所有这些li li, li li li, ... 规则。

编辑：我用它玩了一点，并想出了一个新版本，使用隐藏的浮动counter()-伪元素进行缩进：http: //jsfiddle.net/za3db/5/。

于 2013-10-29T18:00:40.090 回答
0

我知道这个答案有点晚了，但是我最近在一棵树上工作并且有完全相同的想法，并通过研究几种产品解决它的方式找到了解决方案。下面的代码片段说明了一种可能的解决方案，即为树中的每个项目放置一个填充 div，该填充具有较大的负边距，允许它覆盖整行。这是一个非常简单的CSS唯一解决方案。

希望它能帮助你和其他遇到这个问题+答案的人。

.fill {
  display: none;
  margin-left: -10000px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
}

.title {
  position: relative;
}

.title:hover .fill {
  display: block;
  background-color: #eee;
}
<ul class="tree">
  <li>
    <div class="title">
      <div class="fill"></div>
      Animals
    </div>
    <ul>
      <li>
        <div class="title">
          <div class="fill"></div>
          Birds
        </div>
        <ul>
          <li class="last">
            <div class="title">
              <div class="fill"></div>
              Eagle
            </div>
          </li>
        </ul>
      </li>
      <li>
        <div class="title">
          <div class="fill"></div>
          Mammals
        </div>
        <ul>
          <li>
            <div class="title">
              <div class="fill"></div>
              Elephant
            </div>
          </li>
          <li class="last">
            <div class="title">
              <div class="fill"></div>
              Cats
            </div>
            <ul>
              <li>
                <div class="title">
                  <div class="fill"></div>
                  Lion
                </div>
              </li>
              <li class="last">
                <div class="title">
                  <div class="fill"></div>
                  Tiger
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="last">
        <div class="title">
          <div class="fill"></div>
          Reptiles
        </div>
        <ul>
          <li>
            <div class="title">
              <div class="fill"></div>
              Snake
            </div>
          </li>
          <li class="last">
            <div class="title">
              <div class="fill"></div>
              Turtle
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

于 2021-07-06T09:33:50.917 回答