html - 无法阻止禁用的复选框受到 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 检查 container 类是否具有(或没有)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>