CSS鼠标在其他标签上改变背景颜色

This is a very tricky one and I'll explain this the best I have an provide full working code.

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

I have some rating code and what I need it to do is the following:

我有一些评级代码，我需要它做的是:

e.g: Click on the 5th rate (last one) ... It will change it's color and all the ones before it to green.

e。旅客:点击第五频道(最后一个)……它会改变颜色和之前的颜色。

Now comes the tricky part.

现在棘手的部分来了。

If you now hover on any before the 5th (selected one) I need the selected one (in this case the 5th) and any between where you are hovering to be another background color.

如果您现在悬停在第5个(选中的一个)之前的任何一个(在本例中是第5个)，以及您悬停在其中的任何一个(在此之间)以作为另一种背景颜色。

So, if the selected was the 5th and I hovered on the 2nd, then the 5th, 4th and 3rd should have another background color.

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

I hope I have explained it properly.

我希望我已经解释清楚了。

Here is a jsfiddle of it:

这里有一个jsfiddle:

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

and below is the code:

下面是代码:

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);
}

2 个解决方案

#1

Define the background for :checked items when the parent is hovered:

当父元素被悬空时，为:选中项定义背景:

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

And then override this style to show the default hovered background again:

然后重写此样式，再次显示默认的悬空背景:

.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;
}

Here is a Fiddle.

这是一个小提琴。

#2

I messed about with this in the original fiddle and came up with these selectors:

我在最开始的小提琴里搞砸了，然后想出了这些选择器:

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

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

Not identical to the solution offered by Linus, but it does the same job:

与莱纳斯提供的解决方案不一样，但它做的是同样的工作:

body{background:#222;}

.showcase{
  text-align:center;
  position: absolute;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}

.rating-system1 {
  width:100%;
  height:10px;
  display:inline-block;
  margin:2px;
  position: relative;
} 

input{
  display:none;
}

label{
  float:right;
  display:inline-block;
  width:30px;
  height:10px;
  background:#ccc;
  margin:4px;
  position: relative;
  transition:all .3s;
}

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

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

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

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

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

.text{
  color:#ccc;
  padding:10px 0;
  position: absolute;
  width:100%;
  top:100%;  
}

<div class="showcase">
<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>

</div>

#1