CSS - рейтинг звезд - PullRequest
Новая
       17

CSS - рейтинг звезд

1 голос
/ 30 мая 2019

Я пытаюсь создать систему рейтинга в CSS без использования ярлыков, и мне пока что удалось ее подделать. Однако у меня есть проблема, когда стиль не применяется на hover.

Hover effects

Таким образом, когда я наведу курсор на не отмеченный элемент, его цвет должен стать фиолетовым, но в результате фиолетовый цвет применяется только к братьям и сестрам после него, а не к тому, который находится в центре (он должен применяться как к завис и те, что после). Однако при наведении курсора на проверяемый элемент стили применяются правильно (цвет при наведении указывается на проверяемый элемент и все элементы после него).

Мой CSS: 

div {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}

input {
  visibility:hidden;
}

input:before {
  display: flex;
  content: '★';
  font-size: 50px;
  visibility: visible;
}

input:checked,
input:checked ~ input:before {
  color: green;
}

input:hover,
input:hover ~ input:before {
  color: purple;
}

Я что-то упускаю здесь, потому что не могу понять.

...