Почему hover срабатывает только на последний блок?

Question

[tltary]

Почему ховер работает только при наведении на последний блок?
jsfiddle.net/aq9Laaew/168002

Answer 1

[0xD34F]

Селектор неправильный, замените

&:hover + .block .circle-1

на

&:hover ~ .block .circle-1

Ну и для второго аналогично (да и для последнего тоже не помешает - ради единообразия).

UPD. А вообще, прописывать вручную стили для каждого элемента необходимости нет. Можно сложить цвета в список, и сделать по нему цикл:

.hover {
  ...

  .text {
    ...

    $hover-colors: red, green, blue;
    @for $i from 1 through length($hover-colors) {
      &:nth-child(#{$i}):hover ~ .block .circle:nth-child(#{$i}) {
        background: nth($hover-colors, $i);
      }
    }

Comments

[tltary]

Спасибо

Answer 2

[Никита Егоров]

Вместо +, надо использовать ~

jsfiddle.net/Svupol/aq9Laaew/168011

Comments

[tltary]

Спасибо