鼠标悬停时动画部分标题答案

【问题标题】：Animate part of title when mouse is over鼠标悬停时动画部分标题
【发布时间】：2022-01-13 20:47:04
【问题描述】：

我正在尝试为由两部分组成的标题制作动画：“HARD”和“WARE”，第二部分的颜色更透明。

当鼠标悬停在“HARD”字上时，颜色会正确反转，但是当鼠标悬停在“WARE”字上时，这不会发生，只有一种颜色会改变。我已经尝试过使用组合器选择器，但是没有“前一个兄弟姐妹”的选择器。

body {
  background-color: #171717;
}

#title {
  font-size: 10vmax;
  font-family: 'Open Sans', Calibri;
}

#hard {
    color: rgba(255, 255, 255, 1);
    transition: all 0.3s ease-in-out;
}

#hard:hover {
    color: rgba(255, 255, 255, 0.18);
}

#hard:hover + #ware {
    color: rgba(255, 255, 255, 1);
}

#ware {
    color: rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease-in-out;
}

#ware:hover {
    color: rgba(255, 255, 255, 1);
}

#title span:last-child:hover + #title > span:first-child {
    color: rgba(255, 255, 255, 0.18);
}

<div id="title">
  <span id="hard">HARD</span>
  <span id="ware">WARE</span>
</div>

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

这是一个解决方案，它在两个规则中使用 parent 元素的 :hover 状态，这些规则将选择器与第一个和最后一个子元素组合在一起：

body {
  background-color: #171717;
}

#title {
  font-size: 10vmax;
  font-family: 'Open Sans', Calibri;
}

#hard {
  color: rgba(255, 255, 255, 1);
  transition: all 0.3s ease-in-out;
}

#ware {
  color: rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease-in-out;
}

#title:hover span:first-child {
  color: rgba(255, 255, 255, 0.18);
}

#title:hover span:last-child {
  color: rgba(255, 255, 255, 1);
}

<div id="title">
  <span id="hard">HARD</span>
  <span id="ware">WARE</span>
</div>

添加：除了第一个和最后一个孩子，您还可以使用选择器中的 ID：

body {
  background-color: #171717;
}

#title {
  font-size: 10vmax;
  font-family: 'Open Sans', Calibri;
}

#hard {
  color: rgba(255, 255, 255, 1);
  transition: all 0.3s ease-in-out;
}

#ware {
  color: rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease-in-out;
}

#title:hover #hard {
  color: rgba(255, 255, 255, 0.18);
}

#title:hover #ware {
  color: rgba(255, 255, 255, 1);
}

<div id="title">
  <span id="hard">HARD</span>
  <span id="ware">WARE</span>
</div>

【讨论】：

有没有#title:hover 的解决方案？
好吧，兄弟选择器（+ 和 ~）只适用于后续兄弟，因此 CSS 中不可能选择 previous 兄弟，正如你所尝试的。但是你可以用 Javascript/jQuery 来做到这一点。
感谢@johannes

【解决方案2】：

这是一个更正，当“ware”悬停时，您忘记更改不透明度，除了一切都正确


#hard:hover {
    color: rgba(255, 255, 255, 0.18);
}

#hard:hover + #ware {
    color: rgba(255, 255, 255, 1);
}

#ware {
    color: rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease-in-out;
}

#ware:hover {
  color: rgba(255, 255, 255, 0.18);
}

#ware:hover + #hard{
    color: rgba(255, 255, 255, 1);
    
}

这是你的代码

【讨论】：