Question

我正在尝试创建一个显示您悬停的星星数量的5星系统。

所以，有一个背景，它的宽度为5星，然后在它前面有一个形状相同的div，有5个不同颜色的星星，这个div的宽度默认为0。

当一个人将光标悬停在宽度上时，通过正确调整宽度来显示第二个背景。

我无法让这个工作，这是我的小提琴：http://jsfiddle.net/AAgU9/

我的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>

我的CSS是：

.stb{
     background:red;
    width:140px;
    height:27px;
    cursor:pointer}
.stf{
    position:absolute;
    width:0;
    height:27px;
    top:0;
    left:0;
    background:green 0 -26px;
    cursor:pointer}
.sts{
    position:absolute;
    width:28px;
    height:27px;
    top:0;
    cursor:pointer;
    z-index:2}
.st1{left:0}
.st2{left:28px}
.st3{left:56px}
.st4{left:84px}
.st5{left:112px}
.st1:hover .stf{background:red}
.st2:hover .stf{width:56px}
.st3:hover .stf{width:84px}
.st4:hover .stf{width:112px}
.st5:hover .stf{width:140px}

我做错了什么？

Answer 1

我想你想要这个：http://jsfiddle.net/AAgU9/4/

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

相反，你想看看兄弟姐妹，特别是你想要使用~来定位一些元素之后的兄弟姐妹，这意味着#someElem ~ div之类的东西会选择所有兄弟姐妹的兄弟姐妹。 #someElem但也追随它。

所以，只需重新订购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>

并在您的css中使用~：

.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;
}

some readin'：http://css-tricks.com/child-and-sibling-selectors/

Answer 2

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

JSFiddle.

<强> CSS

#stars_container {
background:#ddd;
background-width:0;
position:absolute:
top:0;
left:0;
display:block;
height:12px;
width:0;
}


.sts { display:inline; }

<强> HTML

<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>

<强>的jQuery

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

星级评定系统的CSS

2 个答案: