悬停父级时为子类添加悬停效果

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）div元素，menu类错过了结束语。

2）css选择器mui错过.

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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