CSS/Less/Sass - 在以下情况下匹配每个兄弟姐妹:悬停

Question

在这段代码中:

<div id="Container">
  <span class='first'>First</span>
  <span class='second'>Second</span>
  <span class='third'>Third</span>
</div>

我想改变颜色,何时:hover.

1. 如果(.first:hover)那么.first { color: red; }
2. 如果(.second:hover)那么.first, .second { color: red; }
3. 如果(.third:hover)那么.first, .second, .third { color: red; }

没有JS,这可能吗？我可以接受CSS Hacks :)

---

可能答案:

1. @panther的回答

---

更难的版本:

<div id="Container">
  <span class='first' style='color: red'>First</span>
  <span class='second' style='color: green'>Second</span>
  <span class='third' style='color: blue'>Third</span>
</div>

1. 如果(.first:hover)那么.first { color: pink; }
2. 如果(.second:hover)那么.first, .second { color: pink; }
3. 如果(.third:hover)那么.first, .second, .third { color: pink; }

---

回答:

1. @Armfoot的回答似乎很好:)

Answer 1

在CSS中没有先前的兄弟选择器,但是......有时你可以使用已知的选择器来完成它.有时.

<style>
    span {color: #000; display: block;}
    div:hover span {color: #f00;}
    span:hover ~ span {color: #000}
</style>

<div id="FirstSecondThird-Container">
    <span class='first'>First</span>
    <span class='second'>Second</span>
    <span class='third'>Third</span>
</div>

https://jsfiddle.net/45zLdcvr/

它适用于block spans(浮动,当然).如果spans有默认值display: inline,当你div在跨距间盘旋时,它会闪烁.

更新:
你更新了每个跨度有自己颜色的问题,然后它可能是:

span {color: red}
.second {color: green}
.third {color: blue}

span {display: block;}
div:hover span {color: pink;}
span:hover ~ .second {color: green}
span:hover ~ .third {color: blue}

https://jsfiddle.net/45zLdcvr/1/

Answer 2

我在基于panther 的回答的@eachSASS 中找到了一种方法：

$containerID: FirstSecondThird-Container;
##{$containerID}:hover span {color:pink} 
@each $spanclass, $spancolor in (first, red), (second, green), (third, blue) {
  ##{$containerID} span:hover ~ .#{$spanclass}, .#{$spanclass} {
    color: #{$spancolor};
  }
}

它有点短，但结果如下（生成的 CSS）：

$containerID: FirstSecondThird-Container;
##{$containerID}:hover span {color:pink} 
@each $spanclass, $spancolor in (first, red), (second, green), (third, blue) {
  ##{$containerID} span:hover ~ .#{$spanclass}, .#{$spanclass} {
    color: #{$spancolor};
  }
}

#FirstSecondThird-Container:hover span {
  color: pink;
}
#FirstSecondThird-Container span:hover ~ .first, .first {
  color: red;
}
#FirstSecondThird-Container span:hover ~ .second, .second {
  color: green;
}
#FirstSecondThird-Container span:hover ~ .third, .third {
  color: blue;
}

span {display: block;} /* this line was not generated, it's just to place them vertically */

其 CSS 规则与panther's fiddle类似。

不错的挑战123qwe :)