无法阻止禁用的复选框受CSS中的悬停事件影响

Question

我有两套复选框，可作为星级评分系统使用。其中一个星级评分被禁用（通过使用复选框上的disabled属性），而另一个不是。

当用户在星级系统中悬停在星星上时，它们会将颜色更改为黄色。但是，如果星级评定系统被禁用，我不希望它们在被遮盖时改变颜色。我试图通过在CSS中的复选框悬停事件中使用:not([disabled])来做到这一点，但星星在悬停时仍然会改变颜色。

.rating,
.rating label {
  margin: 0;
  padding: 0;
  margin-left: auto;
}

.rating {
  border: none;
  float: left;
}

.rating input {
  display: none;
}

.rating label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating .half:before {
  content: "\f089";
  position: absolute;
}

.rating label {
  color: #ddd;
  float: right;
}

.rating input:checked~label,

/* show gold star when clicked */

.rating:not(:checked):not([disabled]) label:hover,

/* hover current star */

.rating:not(:checked) label:hover~label {
  color: #FFD700;
}


/* hover current star when changing rating */

.rating input:checked~label:hover,
.rating label:hover~input:checked~label,

/* lighten current selection */

.rating input:checked~label:hover~label {
  color: #FFED85;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<p>This star rating system should not change colour on hover as the checkboxes are disabled</p>

<fieldset class="rating" id="93">
  <input type="checkbox" id="5star_1" name="rating" value="5" disabled/>
  <label class="full" for="5star_1" title="Excellent"></label>

  <input type="checkbox" id="4halfstar_1" name="rating" value="4.5" disabled/>
  <label class="half" for="4halfstar_1" title="Good"></label>

  <input type="checkbox" id="4star_1" name="rating" value="4" disabled/>
  <label class="full" for="4star_1" title="Pretty good"></label>

  <input type="checkbox" id="3halfstar_1" name="rating" value="3.5" disabled/>
  <label class="half" for="3halfstar_1" title="Nice"></label>

  <input type="checkbox" id="3star_1" name="rating" value="3" disabled/>
  <label class="full" for="3star_1" title="Ok"></label>

  <input type="checkbox" id="2halfstar_1" name="rating" value="2.5" disabled/>
  <label class="half" for="2halfstar_1" title="Kinda bad"></label>

  <input type="checkbox" id="2star_1" name="rating" value="2" disabled/>
  <label class="full" for="2star_1" title="Bad"></label>

  <input type="checkbox" id="1halfstar_1" name="rating" value="1.5" disabled/>
  <label class="half" for="1halfstar_1" title="Meh"></label>

  <input type="checkbox" id="1star_1" name="rating" value="1" disabled/>
  <label class="full" for="1star_1" title="Umm"></label>

  <input type="checkbox" id="halfstar_1" name="rating" value="0.5" disabled/>
  <label class="half" for="halfstar_1" title="Worst"></label>

</fieldset>

<br><br>

<p>This one does what it is supposed to (change its colour on hover)</p>

<fieldset class="rating" id="23">
  <input type="checkbox" id="5star" name="rating" value="5" />
  <label class="full" for="5star" title="Excellent"></label>

  <input type="checkbox" id="4halfstar" name="rating" value="4.5" />
  <label class="half" for="4halfstar" title="Good"></label>

  <input type="checkbox" id="4star" name="rating" value="4" />
  <label class="full" for="4star" title="Pretty good"></label>

  <input type="checkbox" id="3halfstar" name="rating" value="3.5" />
  <label class="half" for="3halfstar" title="Nice"></label>

  <input type="checkbox" id="3star" name="rating" value="3" />
  <label class="full" for="3star" title="Ok"></label>

  <input type="checkbox" id="2halfstar" name="rating" value="2.5" />
  <label class="half" for="2halfstar" title="Kinda bad"></label>

  <input type="checkbox" id="2star" name="rating" value="2" />
  <label class="full" for="2star" title="Bad"></label>

  <input type="checkbox" id="1halfstar" name="rating" value="1.5" />
  <label class="half" for="1halfstar" title="Meh"></label>

  <input type="checkbox" id="1star" name="rating" value="1" />
  <label class="full" for="1star" title="Umm"></label>

  <input type="checkbox" id="halfstar" name="rating" value="0.5" />
  <label class="half" for="halfstar" title="Worst"></label>

</fieldset>

以下是在强制悬停状态的开发人员工具中的样子：

Answer 1

您要求CSS检查容器类是否具有disabled属性（或不具有）。您需要询问类中的input是否具有此属性

类似的东西：

.rating input:checked~label,
.rating input:not(:checked):not(:disabled) + label:hover,
.rating input:not(:checked):not(:disabled) + label:hover~label {
    color: #FFD700;
}

注意： 您也可以删除第一个和第三个规则，并且只需应用第二个规则。

段：

.rating,
.rating label {
  margin: 0;
  padding: 0;
  margin-left: auto;
}

.rating {
  border: none;
  float: left;
}

.rating input {
  display: none;
}

.rating label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating .half:before {
  content: "\f089";
  position: absolute;
}

.rating label {
  color: #ddd;
  float: right;
}

.rating input:checked~label,
.rating input:not(:checked):not(:disabled) + label:hover,
.rating input:not(:checked):not(:disabled) + label:hover~label {
  color: #FFD700;
}


.rating input:checked~label:hover,
.rating label:hover~input:checked~label,
.rating input:checked~label:hover~label {
  color: #FFED85;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<p>This star rating system should not change colour on hover as the checkboxes are disabled</p>

<fieldset class="rating" id="93">
  <input type="checkbox" id="5star_1" name="rating" value="5" disabled/>
  <label class="full" for="5star_1" title="Excellent"></label>

  <input type="checkbox" id="4halfstar_1" name="rating" value="4.5" disabled/>
  <label class="half" for="4halfstar_1" title="Good"></label>

  <input type="checkbox" id="4star_1" name="rating" value="4" disabled/>
  <label class="full" for="4star_1" title="Pretty good"></label>

  <input type="checkbox" id="3halfstar_1" name="rating" value="3.5" disabled/>
  <label class="half" for="3halfstar_1" title="Nice"></label>

  <input type="checkbox" id="3star_1" name="rating" value="3" disabled/>
  <label class="full" for="3star_1" title="Ok"></label>

  <input type="checkbox" id="2halfstar_1" name="rating" value="2.5" disabled/>
  <label class="half" for="2halfstar_1" title="Kinda bad"></label>

  <input type="checkbox" id="2star_1" name="rating" value="2" disabled/>
  <label class="full" for="2star_1" title="Bad"></label>

  <input type="checkbox" id="1halfstar_1" name="rating" value="1.5" disabled/>
  <label class="half" for="1halfstar_1" title="Meh"></label>

  <input type="checkbox" id="1star_1" name="rating" value="1" disabled/>
  <label class="full" for="1star_1" title="Umm"></label>

  <input type="checkbox" id="halfstar_1" name="rating" value="0.5" disabled/>
  <label class="half" for="halfstar_1" title="Worst"></label>

</fieldset>

<br><br>

<p>This one does what it is supposed to (change its colour on hover)</p>

<fieldset class="rating" id="23">
  <input type="checkbox" id="5star" name="rating" value="5" />
  <label class="full" for="5star" title="Excellent"></label>

  <input type="checkbox" id="4halfstar" name="rating" value="4.5" />
  <label class="half" for="4halfstar" title="Good"></label>

  <input type="checkbox" id="4star" name="rating" value="4" />
  <label class="full" for="4star" title="Pretty good"></label>

  <input type="checkbox" id="3halfstar" name="rating" value="3.5" />
  <label class="half" for="3halfstar" title="Nice"></label>

  <input type="checkbox" id="3star" name="rating" value="3" />
  <label class="full" for="3star" title="Ok"></label>

  <input type="checkbox" id="2halfstar" name="rating" value="2.5" />
  <label class="half" for="2halfstar" title="Kinda bad"></label>

  <input type="checkbox" id="2star" name="rating" value="2" />
  <label class="full" for="2star" title="Bad"></label>

  <input type="checkbox" id="1halfstar" name="rating" value="1.5" />
  <label class="half" for="1halfstar" title="Meh"></label>

  <input type="checkbox" id="1star" name="rating" value="1" />
  <label class="full" for="1star" title="Umm"></label>

  <input type="checkbox" id="halfstar" name="rating" value="0.5" />
  <label class="half" for="halfstar" title="Worst"></label>

</fieldset>