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

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

Answer 2

尝试使用:: before - 检查以下解决方案可以提供帮助。

http://jsfiddle.net/t3SvL/3/