Question

对于给定的例子：

<div class="menu">
    <div class="menu_top">Menu1<div class="sub_menu">SubMenu1</div></div>
    <div class="menu_top">Menu2<div class="sub_menu">SubMenu2</div></div>
    <div class="menu_top">Menu3<div class="sub_menu">SubMenu3</div></div>
</div>

如何更改各个子元素的显示属性？

我正在尝试解决方案：

.menu_top .sub_menu{
    display: none;
}
.menu_top:hover div.sub_menu{
    display: block;
}

但当鼠标悬停在任何“menu_top”上时，会显示所有“sub_menu”。

Answer 1

您希望在悬停在.sub_menu上时显示.menu_top？

.menu .menu_top:hover .sub_menu {
    display: block;
}

Answer 2

如果您只想在悬停时显示相应的子.menu_top:hover，则选择器应为.sub_menu。

查看实际操作 - http://jsfiddle.net/spBJH/

Answer 3

你让他们换了。

.menu：hover = {当我将鼠标悬停在.menu上时执行某些操作}

我认为你想要的是：

.sub_menu:hover { this }

Answer 4

我认为你只需要做一些小改动。

您有.menu:hover而不是.menu_top:hover

试试这个：

.menu .sub_menu{
    display: none;
}
.menu_top:hover div.sub_menu{
    display: block;
}

Answer 5

尝试：

.menu_top:hover div.sub_menu {
    display:block;
}

Answer 6

5.6 Child selectors

当元素是某个元素的子元素时，子选择器匹配。子选择器由两个或多个由“＆gt;”分隔的选择器组成。

以下规则设置作为BODY子项的所有P元素的样式：

body > P { line-height: 1.3 }

以下示例结合了后代选择器和子选择器：

div ol>li p

它匹配作为LI的后代的P元素; LI元素必须是OL元素的子元素; OL元素必须是DIV的后代。请注意“＆gt;”周围的可选空格组合器已被排除在外。

如何更改元素子的CSS属性

6 个答案: