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>

Answer 2

您可以使用.slick-slide:last-child { border-right: 0; }相邻选择器来定位相邻元素

Stack Snippet

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

Answer 3

发布CSS问题时，请将相关的HTML代码包含在内，否则我们只能评估问题的一半。

我假设这是你的结构：https://codepen.io/barrymcgee/pen/vdGOra?editors=1100#

.footer_status_gear的背景不变的原因是因为它是链接的父元素。 :hover伪类只能指向应用它的元素的子元素。

如果我对您的HTML结构做出的假设是错误的，请提供它，我会再看一遍。

CSS悬停修改自我和其他类

3 个答案: