CSS悬停修改自身和其他类

Question

我知道有很多关于 :hover 影响其他类的答案。我想做的是更改自身的字体颜色 (.footer_status_tex) 和另一个类的 background-color (.footer_status_gear)

简化的 CSS - 像这样:

CSS

.footer_status_tex {
    cursor: pointer;
    color: #fff;
}
.footer_status_gear {
    width: 36px;
    height: 36px;
    background-color: #000;
}

.footer_status_tex: hover {
    color: #81aaf3;
}
.footer_status_tex:hover .footer_status_gear {
    background-color: #aba51e;
}

HTML

<div class="footer_status_tex" style="">Hello</div>
<div class="footer_status_gear"></div>

当前设置仅更改字体颜色。

谢谢

Answer 1

首先，需要修复选择器.footer_status_tex:hover，删除:后面的空白。

其次，选择器 .footer_status_tex:hover .footer_status_gear 仅当后一个是前一个的子级时才起作用。

您需要的是 .footer_status_tex:hover + .footer_status_gear 或 ~ 如果后一个是前一个的兄弟，后一个也必须放在接下来的位置到 DOM 中的前一个。

.footer_status_tex:hover {
  color: #81aaf3;
}

.footer_status_tex:hover + .footer_status_gear {
  background-color: #aba51e;
  height: 20px;
}

<div class="footer_status_tex">Hello</div>
<div class="footer_status_gear"></div>