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/

3 番目または 4 番目のルールを定義していないため、2 番目のレベルでのみインデントされていることがわかります...

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 に答える