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

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>

ОТВЕТЫ

Ответ 1

Добавьте дополнение к divs вместо <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/

Устанавливая его в элементе списка, вы также заполняете все элементы дочернего списка. Если вы можете изменить свою разметку, я думаю, что есть лучшие способы.

Ответ 2

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

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

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

Ответ 3

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

Как и мое предложение, для правильной структуры html и css вам необходимо назначить class или id имя <li> и <div>, из-за этого вы может легко обнаружить проблему и получить мощную структуру.

Ответ 4

Вы можете удалить padding-left из li-элемента и использовать jquery для добавления padding-left для 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");
            });

Демо

Ответ 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*/

Ответ 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>

Ответ 7

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

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

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

https://jsfiddle.net/9ydr6b6z/

Ответ 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; 
}

Ответ 9

Попытка найти общее решение, которое я пробовал с помощью CSS-счетчики. К сожалению, похоже, что счетчики могут использоваться только в свойствах 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>