Html 星级评定系统的CSS

我正在尝试创建一个五星系统，显示你悬停的星星数量

因此，有一个背景，它的宽度是5颗星，然后在它前面有一个形状相同的div，它有5个不同颜色的星星，默认情况下，这个div的宽度是0

当一个人将光标悬停在宽度上时，通过适当调整宽度，会出现第二个背景

我不能让它工作，这是我的小提琴：

我的html是：

<div style="position:relative">
    <div class="stb"></div>
    <div class="stf"></div>
    <div class="sts st1"></div>
    <div class="sts st2"></div>
    <div class="sts st3"></div>
    <div class="sts st4"></div>
    <div class="sts st5"></div>
</div>

---

我做错了什么？

您介意使用jQuery吗？希望此代码能帮助您朝着正确的方向前进：

CSS

HTML

---

您介意使用jQuery吗？希望此代码能帮助您朝着正确的方向前进：

CSS

HTML

我想你想要这个：

您错误地使用了选择器。st1:hover.stf将使用stf类以.st1:hover的后代为目标。你没有这样的元素

相反，您希望查看兄弟姐妹，特别是，您希望使用~ which targets thinks，它位于某个元素之后，这意味着类似于someElem~div的内容将选择所有属于someElem兄弟姐妹但也位于该元素之后的div元素

因此，只需重新排序您的HTML：

<div style="position:relative">
    <div class="stb"></div>
    <div class="sts st1"></div>
    <div class="sts st2"></div>
    <div class="sts st3"></div>
    <div class="sts st4"></div>
    <div class="sts st5"></div>
    <div class="stf"></div>
</div>

有人读到：

我想你想要这个：

您错误地使用了选择器。st1:hover.stf将使用stf类以.st1:hover的后代为目标。你没有这样的元素

相反，您希望查看兄弟姐妹，特别是，您希望使用~ which targets thinks，它位于某个元素之后，这意味着类似于someElem~div的内容将选择所有属于someElem兄弟姐妹但也位于该元素之后的div元素

因此，只需重新排序您的HTML：

<div style="position:relative">
    <div class="stb"></div>
    <div class="sts st1"></div>
    <div class="sts st2"></div>
    <div class="sts st3"></div>
    <div class="sts st4"></div>
    <div class="sts st5"></div>
    <div class="stf"></div>
</div>

---

一些阅读：

.st5:hover.stf将以div.st5的子代div.stf为目标，但stf实际上是st5.your.st1:hover.stf等的兄弟。。。您没有.st1的任何子级，这些规则如何工作？请看以下内容：.st5:hover.stf将以div.st5的子代div.stf为目标，但stf实际上是st5.your.st1:hover.stf等的兄弟姐妹。。。你没有.st1的任何子项，这些规则如何工作？看看这个：jQuery很好，如果没有其他方法，尽管我希望我只能保留这个CSS jQuery很好，如果没有其他方法，尽管我希望我只能保留这个CSS

<div id="stars_container"></div>

<div class="sts" data-stars="10">1</div>
<div class="sts" data-stars="20">2</div>
<div class="sts" data-stars="30">3</div>
<div class="sts" data-stars="40">4</div>
<div class="sts" data-stars="50">5</div>

$(".sts").hover(function() {
  var len = $(this).data('stars');
  $("#stars_container").css({'width':len+'px'});
});

<div style="position:relative">
    <div class="stb"></div>
    <div class="sts st1"></div>
    <div class="sts st2"></div>
    <div class="sts st3"></div>
    <div class="sts st4"></div>
    <div class="sts st5"></div>
    <div class="stf"></div>
</div>

.st1:hover ~ .stf {
    width: 28px;
}
.st2:hover ~ .stf {
    width:56px;
}
.st3:hover ~ .stf {
    width:84px;
}
.st4:hover ~ .stf {
    width:112px;
}
.st5:hover ~ .stf {
    width:140px;
}