html - CSS:悬停特定元素时更改类 "x"的所有元素

Question

我有一个 div 元素，我希望所有具有特定类的元素在 div 悬停时发生变化。 我只是无法让它工作。我的代码只影响类的第一个元素，不，我没有使用 :first-child 选择器...

这是我的代码: https://jsfiddle.net/f6q4080c/

#hoverme {
  width: 100px; height: 100px; 
  background: blue;
}
.other {
  width: 100px; height: 100px; margin-top: 5px;
  background: red; 
}

#hoverme:hover + .other {
  background: green;
}

<div id="container">
    <div id="hoverme" href="#">Hover me to turn the red ones green.</div>
    <div class="other">I want to turn green.</div>
    <div class="other">I want to turn green, too.</div>
</div>

Answer 1

您可以使用 sibling selector ~以特定元素的所有 sibling 为目标，当您的 hoverme 元素悬停时，这会将所有 .other 元素变为“绿色”:

/* This will turn all other classes green when hoverme is hovered */
#hoverme:hover ~ .other {
    background: green;
}

示例

#hoverme {
  width: 100px;
  height: 100px;
  background: blue;
}
.other {
  width: 100px;
  height: 100px;
  margin-top: 5px;
  background: red;
}
#hoverme:hover ~ .other {
  background: green;
}

<div id="container">
  <div id="hoverme" href="#">Hover me to turn the red ones green.</div>
  <div class="other">I want to turn green.</div>
  <div class="other">I want to turn green, too.</div>
</div>