html – 全宽：悬停列表的悬浮背景？

概述下面的html剪辑呈现一个嵌套的元素列表.悬停(鼠标悬停)元素背景颜色变化.但左侧的空间是无色的(由于缩进). 我如何才能使这个空间被染色？ 我试图添加绝对定位元素到li元素左：0.但是那些部分隐藏了li元素的内容：/ ul { list-style: none; padding: 0; margin:0 }li { margin:0; padding: 0; 下面的HTML剪辑呈现一个嵌套的元素列表.悬停(鼠标悬停)元素背景颜色变化.但左侧的空间是无色的(由于缩进).

我如何才能使这个空间被染色？

我试图添加绝对定位元素到li元素左：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 >  <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>

解决方法 将填充添加到div,而不是< li&gt ;::

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/

通过将其设置在列表项上,您最终也会填充所有子列表项.如果你可以改变你的标记,我认为有更好的方法.

总结

以上是内存溢出为你收集整理的html – 全宽：悬停列表的悬浮背景？全部内容，希望文章能够帮你解决html – 全宽：悬停列表的悬浮背景？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。