html - 在悬停时突出显示嵌套列表中的整行

Question

上下文

我已经 <li><div></div></li>悬停时具有背景颜色的元素。

看起来像:

我想给整行上色，比如:

调查

代码:

div.wrapper:hover {
  background: rgba(220, 220, 220, 0.3);
}

我试过了，没有成功:

div.wrapper:hover:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  top: 0;
  right: 0;
  background: rgba(220, 220, 220, 0.3);
}

问题

我该怎么做？

Answer 1

移除 ul/li 的所有边距，将内容包装器设置为 display:block，然后根据嵌套级别在这些元素上放置 padding:http://jsfiddle.net/dYdQB/

HTML

<ul>
  <li><span>Hello</span></li>
  <li><span>World</span><ul>
    <li><span>Nested deeper</span></li>
    <li><span>And again</span><ul>
      <li><span>And Even Deeper</span></li>
    </ul></li>
  </ul></li>
</ul>
​

CSS

ul, li { margin:0; padding:0 }
ul li span { display:block }
ul li span:hover { background:orange }
li span       { padding-left:2em }
li li span    { padding-left:4em }
li li li span { padding-left:6em }​