Question

我想制作一个纯粹的css [no jquery]星级评分系统。所以我有一个带有5个单选按钮的html表单。到目前为止，当我悬停/点击星形单选按钮更改它自己的背景图像时，我可以制作。它适用于每个明星但分开。当我点击第五颗星时 - 只有第五颗星被改变了。当我点击第四颗星时 - 只有第四颗星被改变，依此类推。当我悬停/点击第五颗星时，我想做到这一点 - ＆gt;所有明星改变他们的背景图像。当我点击第二颗星时，前两颗星会改变等等，这样用户就可以看到他投票的星星数量。（你已经在互联网上看到了这些评级系统）

我想做这些（再次只有css）：

enter image description here

但我最终得到了这个：

enter image description here

所以我有5星/无线电输入，每个都来自一个班级：

1星 - ＆gt; radioStarButton1

2星 - ＆gt; radioStarButton2

3星 - ＆gt; radioStarButton3

4星 - ＆gt; radioStarButton4

5星 - ＆gt; radioStarButton5

           <input type="radio" name="stars" id="'.'2stars-for-id-'.$row['id'].'" class="radioStarButton2" value="2" />
           <label for="'.'2stars-for-id-'.$row['id'].'"></label>

           <input type="radio" name="stars" id="'.'3stars-for-id-'.$row['id'].'" class="radioStarButton3" value="3" checked />
           <label for="'.'3stars-for-id-'.$row['id'].'"></label>

           <input type="radio" name="stars" id="'.'4stars-for-id-'.$row['id'].'" class="radioStarButton4" value="4" />
           <label for="'.'4stars-for-id-'.$row['id'].'"></label>

           <input type="radio" name="stars" id="'.'5stars-for-id-'.$row['id'].'" class="radioStarButton5" value="5" />
           <label for="'.'5stars-for-id-'.$row['id'].'"></label>

当我悬停/点击第二个类时，我想做.radioStarButton2也改变了第一个类 - ＆gt; .radioStarButton1和THAT是问题 - 如果可能的话，改变多个类元素。

还有css：这是工作css：

input[type="radio"]{
display:none;
}

input[type="radio"] + label
{
    background-image: url("uncheckedstar.png");
    height: 23px;
    width: 23px;
    display:inline-block;
    padding: 0 0 0 0px;
}

.radioStarButton1:hover + label
{
    background-image: url("star.png");
    height: 23px;
    width: 23px;
    display:inline-block;
    padding: 0 0 0 0px;
}
.radioStarButton1:checked + label
{
    background-image: url("star.png");
    height: 23px;
    width: 23px;
    display:inline-block;
    padding: 0 0 0 0px;
}

下一个代码显然是错误的，但我不知道该怎么做。我上传它只是为了了解我正在尝试做什么：

.radioStarButton2:hover + label , .radioStarButton1
{

    background-image: url("star.png");
    height: 23px;
    width: 23px;
    display:inline-block;
    padding: 0 0 0 0px;
}
.radioStarButton2:checked + label , .radioStarButton1
{
    background-image: url("star.png");
    height: 23px;
    width: 23px;
    display:inline-block;
    padding: 0 0 0 0px;
}

.radioStarButton3:hover + label , .radioStarButton1 , .radioStarButton2
{

    background-image: url("star.png");
    height: 23px;
    width: 23px;
    display:inline-block;
    padding: 0 0 0 0px;
}
.radioStarButton3:checked + label , .radioStarButton1 , .radioStarButton2
{
    background-image: url("star.png");
    height: 23px;
    width: 23px;
    display:inline-block;
    padding: 0 0 0 0px;
}

Answer 1

如果以相反的顺序放置HTML元素，则可以使用CSS同级选择器（~）来选择前面的星号。

HTML：

<div class="stars">
    <span class="star">5</span>
    <span class="star">4</span>
    <span class="star">3</span>
    <span class="star">2</span>
    <span class="star">1</span>
</div>

CSS：

.stars {
    float: left;
}

.star {
    display: block;
    float: right;

    width: 20px;
    height: 20px;
    margin: 5px;


    background: grey;
}

.star:hover,
.star:hover ~ .star {
    background: yellow;
}

http://jsfiddle.net/gfHX4/

Answer 2

您只能使用CSS选择“向右”或“向下”，而不是“向左”或“向上” - 这意味着，在DOM中的元素可能之后选择同一级别的后代元素和兄弟;选择祖先或以前的兄弟姐妹不是。

所以你可以做的就是让明星能够改变颜色，包括那些在容器元素悬停时改变颜色所有的颜色 - 然后让明星来之后，使用~选择器再次灰色。

对于“活动”/单选按钮检查状态，没有简单的方法 - 你可以尝试使用:target选择器，但这需要将整个内容嵌套到一些具有不同ID的元素，一旦使用页面上的其他散列锚，它将再次失去状态。

要真正实现这种目的，你必须改变星星的顺序，这样第一个显示的是DOM顺序中的最后一个，等等 - 例如通过将它们浮动到容器元素内的右侧，或使用direction。

这样，当检查最后一个元素时，只有那个元素获得橙色 - 只有可见顺序中的第一个元素才是橙色。
从头到尾检查，你格式化倒数第二个和最后一个（再次使用~） - 由于反向显示顺序，第一个以可见顺序显示的星号将是橙色 - 等

剩下的唯一问题是结合这两种方法 - 不确定是否可以轻松完成。

编辑：好的，看完Koen的答案之后，如果你对两者使用反向排序技巧，它应该很容易：hover和：checked states。

Answer 3

您可以将每个label放置在嵌套列表中，并应用悬停状态以包含子元素，就像使用下拉导航一样。

但是，一旦用户点击更高级别的星标，您仍然需要一些脚本来标记所选的低级星级input字段。否则，当他们将鼠标移开时，悬停效果会消失，你仍然会遇到同样的问题，只有一颗星显示为高亮显示。

Answer 4

Koen解决方案的扩展......并且在点击之后停留......你需要重新定位/设置标签（并添加你的星星），隐藏输入，但它只是CSS

演示：http://jsfiddle.net/f82Fg/2/

HTML

<div class="butts">
    <input id="r5" type="radio" class="butt" value="5" />
    <label for="r5">5</label>
    <input id="r4" type="radio" class="butt" value="4" />
    <label for="r4">4</label>
    <input id="r3" type="radio" class="butt" value="3" />
    <label for="r3">3</label>
    <input id="r2" type="radio" class="butt" value="2" />
    <label for="r2">2</label>
    <input id="r1" type="radio" class="butt" value="1" />
    <label for="r1">1</label>
</div>

CSS

.butts {
    float: left;
}
.butt {
    display: block;
    float: right;    
    width: 16px;
    height: 16px;
}
.butt:hover,
.butt:hover ~ .butt,
.butt:hover ~ label {
    background-color: blue;
}
.butt:checked,
.butt:checked ~ .butt,
.butt:checked ~ label {
    background-color: red;
}

如何将鼠标悬停在类上以触发其他类的更改？

4 个答案: