在悬停上显示兄弟姐妹-动态css / scss规则？

Question

我正在做的代码看起来是这样的-一直到50.(不理想)

可以有从1到100个锚/div组合，但更多的时候不是以个位数，所以几乎总是有许多多余的CSS规则。

我想知道是否有更好的方法来编写CSS / SCSS，而不是手动为每个可能的结果编写代码？或者只有使用JS才能做到这一点？

.content { display: none; }
.anchor-1:hover ~ .content-1,
.anchor-2:hover ~ .content-2,
.anchor-3:hover ~ .content-3,
.anchor-4:hover ~ .content-4,
.anchor-5:hover ~ .content-5 { display: block; }

我还在这里篡改了代码：https://jsfiddle.net/rn437pw8/8/

Answer 1

您可以在SCSS中使用简单的for循环。

@for $i from 1 through 5 {
  .anchor-#{$i}:hover ~ .content-#{$i} {
    display: block; 
  }
}

JSFiddle