полная ширина: фон hover для вложенных списков?

Question

html snipped below отображает вложенный список элементов. При наведении мыши (мыши) цвет фона элементов изменяется. Но пространство остается неокрашенным слева (из-за отступов).

Как я получу это пространство, чтобы оно было окрашено?

Я попытался добавить 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

Добавить отступы в дивы вместо <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

Я думаю, что самый простой способ здесь - разместить набивку и наведение на ваших 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 3

Может быть достигнут с использованием 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 4

бы лучше с помощью CSS, но с помощью JQuery вы могли:

Добавить дополнение к div в зависимости от уровня.

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

https://jsfiddle.net/9ydr6b6z/

Answer 5

Там проблема возникает, потому что вы применили padding-left: 20px;, так что Hover не будет применяться к той части, которая содержит 20px padding слева.

Как мое предложение, для надлежащего HTML структуры & CSS, Вы должны назначить учащегося или ID имени <li> & <div> элемента, благодаря чему вы можете легко обнаружить проблему & получить мощную структуру.

Answer 6

Вы можете удалить обивка-слева от Li элемента и использование JQuery добавить отступы-слева Div так:

$("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 7

Вы можете использовать этот CSS, чтобы сделать ваш DIV Заполним отступы так что пространство не остается некрашенным на эффекте: hover, а затем установите переполнение в скрытое на родительской оболочке.

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

Таким образом, он является общим, так что вы можете иметь столько суб <ul> и <li> теги, как вам нужно. Вот ссылка на JSFiddle с рабочим примером.

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

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)" "; 
 
}

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