Выделить всю строку во вложенном списке при наведении

Контекст

У меня есть элементы

с цветом фона при наведении.

Похоже:

Я хочу покрасить всю строку, например:

Исследование

Код:

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);
}

Вопрос

Как я могу это сделать?

2 ответа

Удалите все поля из 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 }​


попытайтесь сделать это с помощью:: before - проверьте следующее решение.

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

licensed under cc by-sa 3.0 with attribution.