Question

我按照本教程http://code.stephenmorley.org/html-and-css/star-rating-widget/制作星级HTML / CSS组件。

现在我想修改它，当有人在它上面盘旋时，星星不能改变。所以我想我为每个标签添加了一个禁用的类，然后我像这样调整CSS：

.starRating:not(old) > label:not(.disabled):hover:before,
.starRating:not(old) > label:not(.disabled):hover ~ label:not(.disabled):before,
.starRating:not(:hover) > :checked ~ label:before{
   opacity : 1;
}

但是当我的鼠标越过星星时，它仍然在做着变化。

HTML：

<span class="starRating">
    <input id="rating5" type="radio" name="rating" value="5" disabled checked>
    <label class="disabled" for="rating5">5</label>
    <input id="rating4" type="radio" name="rating" value="4" disabled>
    <label class="disabled" for="rating4">4</label>
    <input id="rating3" type="radio" name="rating" value="3">
    <label class="disabled" for="rating3">3</label>
    <input id="rating2" type="radio" name="rating" value="2">
    <label class="disabled" for="rating2">2</label>
    <input id="rating1" type="radio" name="rating" value="1">
    <label class="disabled" for="rating1">1</label>
</span>

Answer 1

找到解决方案。您需要添加一个新行，指定禁用时会发生什么。

.starRating:not(.disabled):not(:hover) > :checked ~ label:before,
.starRating:not(.disabled):not(old) > label:hover:before,
.starRating:not(.disabled):not(old) > label:hover ~ label:before,
.starRating.disabled > :checked ~ label:before {
  opacity : 1;
}

Answer 2

这可以轻松完成，无需添加任何其他类：

.starRating:not(old) > input:not([disabled])+label:hover:before,
.starRating:not(old) > input:not([disabled])+label:hover ~ label:before,
.starRating:not(:hover) > :checked ~ label:before,
.starRating:not(old) > :checked[disabled] ~ label:before{
  opacity : 1;
}

这样做的方法是首先更改所有现有的选择器，以反映它们不应该在禁用输入之后的事实。这意味着一旦禁用所有输入，星星就不会显示。

然而，这导致被检查的星也不显示。要解决此问题，请添加第四个选择器，在选中但禁用的输入后为每个标签选择伪元素。这意味着现在禁用时，悬停不会执行任何操作，并且在未禁用时，行为将保持不变。

这意味着您可以通过将disabled属性添加到每个输入来禁用输入，而不是将属性和类添加到标签中。

当某个类在其上时禁用onhover

2 个答案: