悬停时如何更改嵌套列表的单个列表项的背景颜色（以及整个菜单宽度）

Question

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type='text/css'  media='all'>
        #menu {width: 50%;}
        .high {background: #0F0;}
        .list-item :hover {background: #000;}

        /* non essential styles */
        .list-item a{text-decoration: none;}
        .list-item :hover a{color: #FFF;}
    </style>
</head>
<body>
    <div id="menu" >
        <ul>
            <li class="list-item">
                <div class="level-0 high" id="P0">
                    <a href="#">P0</a>
                </div>
                <ul>
                    <li class="list-item">
                        <div class="level-1" id="C0-P0">
                            <a href="#">C0-P0</a>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="level-1" id="C1-P0">
                            <a href="#">C1-P0</a>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="list-item">
                <div class="level-0" id="P1">
                    <a href="#">P1</a>
                </div>
                <ul>
                    <li class="list-item">
                        <div class="level-1" id="C0-P1">
                            <a href="#">C0-P1</a>
                        </div>
                    </li>
                    <li class="list-item">
                        <div class="level-1" id="C1-P1">
                            <a href="#">C1-P1</a>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

Structure: 结构体：
P0 P0
__ C0-P0 __ C0-P0
__ C1-P0 __ C1-P0
P1 P1
__ C0-P1 __ C0-P1
__ C1-P1 __ C1-P1

Currently I am unable to select and change background (upon hover) of Child items individually. 目前，我无法单独选择和更改子项的背景（悬停时）。
However if I try to use first-child selectors - I am able to select each list item individually. 但是，如果我尝试使用first-child选择器，则可以单独选择每个列表项。 But - 但是-
then the parent's selections are limited to only the anchor width and not the full menu width. 那么父级的选择将仅限于锚点宽度，而不是整个菜单宽度。

Here's the JSFilldle 这是JSFilldle

Answer 1

It's not really clear what you're asking but there should not be a space between :hover and the element. 目前还不清楚您要问什么，但是:hover和element之间不应有空格。

It should be .list-item:hover {...} not .list-item :hover {...} 它应该是.list-item:hover {...}而不是.list-item :hover {...}

Answer 2

Change this line: 更改此行：

.list-item :hover {background: #000;}

to this: 对此：

li .list-item :hover {background: #000;}

Here's jsFiddle ... 这是jsFiddle ...

悬停时如何更改嵌套列表的单个列表项的背景颜色（以及整个菜单宽度）

问题描述

2 个解决方案

解决方案1
0 2012-12-22 23:32:33

解决方案2
0 已采纳 2012-12-22 23:33:43

悬停时如何更改嵌套列表的单个列表项的背景颜色（以及整个菜单宽度）

问题描述

2 个解决方案

解决方案1 0 2012-12-22 23:32:33

解决方案2 0 已采纳 2012-12-22 23:33:43

解决方案1
0 2012-12-22 23:32:33

解决方案2
0 已采纳 2012-12-22 23:33:43