添加徘徊效果的一个子类时，悬停父

Question

我有一个HTML的结构如下所示：

<div class="menu"> 
    <div> 
    <span class="mui drop-down" /> 
    </div> 
</div> 

我想悬停menu类，然后更改drop-down类的颜色。而且，也可以将下拉菜单悬停，也应该改变它的颜色。目前，我有：

.menu:hover, 
.menu:hover ~ mui.drop-down{ 
    color: #000000 !important; 
} 

但它不会做任何事情。这有什么不对？

Answer 1

你必须在这两个HTML/CSS的一些错误：

1）menu类小姐收盘报价div元素。

2）CSS选择mui小姐.

根据您的OP，我认为下面的代码就足够了：

.menu:hover .mui.drop-down { 
 
    color: red; 
 
}

<div class="menu">menu 
 
    <div> 
 
    <span class="mui drop-down">dropdown</span> 
 
    </div> 
 
</div>

Answer 2

波浪号（~）是general sibling combinator。

既然有层次，尝试child combinator（>），或者只是一个descendant combinator（）：

.menu:hover mui.drop-down, 
.menu:hover > div > mui.drop-down 
{ color: #000000 !important; } 

Answer 3

您可以添加以下的CSS悬停效果：

.parent:hover .child, .parent.hover .child { display: block; }