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

然后重写此样式以再次显示默认的悬停background：

.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。

Answer 2

我在最初的小提琴中搞砸了这个，并想出了这些选择器：

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

与Linus提供的解决方案不同，但它的工作相同：

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>

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

2 个答案: