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

ProgramBox

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

Post author:admin
Запись опубликована:7 мая, 2023
Post category:Вопросы по программированию

#html #css

#HTML #css

Вопрос:

Приведенный ниже 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>

Ответ №1:

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

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

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

Ответ №2:

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

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

Ответ №3:

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

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

Ответ №4:

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

ДЕМОНСТРАЦИЯ

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