Question

我目前正在一个无法改变HTML结构的环境中工作。

我正在尝试制作星级评分表。我已经能够做到75％，但现在我被困住并寻求帮助。

这里的结构：

<div class="input">
    <ul class="inputs-list multi-container">
        <li class="hs-form-radio">
            <label class="hs-form-radio-display">
                <input class="hs-input" type="radio" value="Very Disatisfied">
                <span>Very Disatisfied</span>
            </label>
        </li>
        <li class="hs-form-radio">
            <label class="hs-form-radio-display">
                <input class="hs-input" type="radio"  value="Disatisfied">
                <span>Disatisfied</span>
            </label>
        </li>
        <li class="hs-form-radio">
            <label class="hs-form-radio-display">
                <input class="hs-input" type="radio" value="Correct">
                <span>Correct</span>
            </label>
        </li>
        <li class="hs-form-radio">
            <label class="hs-form-radio-display">
                <input class="hs-input" type="radio" value="Satisfied">
                <span>Satisfied</span>
            </label>
        </li>
        <li class="hs-form-radio">
            <label class="hs-form-radio-display">
                <input class="hs-input" type="radio" value="Very Satisfied">
                <span>Very Satisfied</span>
            </label>
        </li>
    </ul>
</div>

和我的css代码：

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

label > input:before { 
  /*margin: 5px;*/
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

label > input:checked,
label:not(:checked) > input:hover{ color: #FFD700;  }

li {list-style:none;}

到目前为止，当检查输入时，星形为黄色，当我将鼠标悬停在另一颗星上时，它们也会变黄。

我无法做的是让以前的星星变黄。因此，如果我点击第三颗星，我希望1号和2号星也是黄色的。

任何帮助将不胜感激。如果您需要更多详细信息，请告诉我们！感谢

将css规则添加到上一个元素

0 个答案: