CSS Hover 改变其他标签的背景颜色

Question

这是一个非常棘手的问题，我会尽我所能解释这一点并提供完整的工作代码。

我有一些评级代码，我需要它执行以下操作:

例如:点击第 5 个比率(最后一个)...它会将它的颜色和它之前的所有颜色更改为绿色。

现在是棘手的部分。

如果您现在将鼠标悬停在 5 号之前的任何位置(选定的)，我需要选定的位置(在本例中为 5 号)和您悬停的位置之间的任何位置作为另一种背景颜色。

所以，如果选择的是第 5 个，而我悬停在第 2 个，那么第 5、第 4 和第 3 应该有另一种背景颜色。

我希望我已经正确解释了它。

这是它的一个 jsfiddle:

https://jsfiddle.net/Satch3000/chd6yfzw/1/

下面是代码:

HTML:

<div class="rating-system1">
    <input type="radio" name='rate' id="star5" />
    <label for="star5"></label>

    <input type="radio" name='rate' id="star4" />
    <label for="star4"></label>

    <input type="radio" name='rate' id="star3" />
    <label for="star3"></label>

    <input type="radio" name='rate' id="star2" />
    <label for="star2"></label>

    <input type="radio" name='rate' id="star1" />
    <label for="star1"></label>
</div>

CSS:

.rating-system1 {
  display: inline-block;
  position: relative;
} 

input {
  display: none;
}

label {
  float: right;
  display: inline-block;
  background: #ccc;
  position: relative;
}

.rating-system1 label:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  top:0;
  left:0;
}

.rating-system1 input:checked ~ label,
.rating-system1 label:hover ~ label,
.rating-system1 label:hover {
  background: seagreen;
}

.rating-system1 input:checked ~ label:before {
  transform: rotate(90deg);
}

Answer 1

为 定义 background:checked 父级悬停时的元素:

.rating-system1:hover input:checked ~ label{
    background:#666;
}

然后覆盖此样式以再次显示默认悬停的背景:

.rating-system1 input:checked ~ label,
.rating-system1 label:hover ~ label,
.rating-system1 label:hover,
.rating-system1 input:checked ~ label:hover ~ label, /* added */
.rating-system1 input:checked ~ label:hover,         /* added */
.rating-system1 label:hover ~ input:checked ~ label{ /* added */
    background:seagreen;
}

这是一个Fiddle .