使用CSS，将鼠标悬停在一个标签上时可以将背景更改为多个div标签吗？

Question

我正在尝试在该项目上尽可能少地使用javascript。 我想在我的网站上创建一个带有星号的投票项。

我将拥有5颗星，它们会逐渐消失，当用户将鼠标移到第一颗时，第一颗将亮起，然后将其移到第二颗上，第二颗和第一颗都亮起，直到它们到达第五颗所有星星都会被点亮。

我尝试用div标签将它们包围起来，以便将它们分组，但是每次使所有五颗星都亮着。

我尝试调整各组的Z索引，以便可以先将鼠标悬停在第一颗恒星上，但是那也不起作用。

也许这无法在CSS中完成，但我觉得应该有一些捷径。 让我知道您是否能想到任何事情。

这是我要使用的JSFiddle： 工作示例

HTML

<div class="clearfix" id="stars">
    <div class="darn">Oh no!</div>
    <div class="star off"></div>
    <div class="star off"></div>
    <div class="star off"></div>
    <div class="star off"></div>
    <div class="star off"></div>
    <div class="brilliant">Thanks!</div>
</div>

CSS

.clearfix div {
    float:left;
    position:relative;
}

#stars {
    width:450px;
    margin:0 auto;
}

.star {
    width:64px;
    height:64px;
    background:url(http://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Full_Star_Blue.svg/64px-Full_Star_Blue.svg.png) no-repeat;
 }

.star:hover {
    background:url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Full_Star_Yellow.svg/64px-Full_Star_Yellow.svg.png) no-repeat;
    cursor:pointer;
}

.group {
    position:absolute
}

Answer 1

如果我没看错，div内的div分组可能会起作用（尽管仅进行了FF测试，但您可以看到图片） http://jsfiddle.net/LL9pH/1/

[edit]固定了文本定位， http：//jsfiddle.net/LL9pH/3/

HTML

<div class="clearfix" id="stars">
    <div class="darn">Oh no!</div>
    <div class="star off">
        <div class="star off">
            <div class="star off">
                <div class="star off">
                    <div class="star off"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="brilliant">Thanks!</div>
</div>

CSS

.star .star { 
    margin-left: 70px;
}

.brilliant {
    margin-left: 400px;
    margin-top: -64px;
}

Answer 2

使用jQuery prevAll（）函数。

<div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
  <div class="star"></div>
</div>

为班级明星提供您正常的bg图像

<script>
  $("document").ready(function(){
    $(".star").hover(function(){
      $(this).css("background-image", "imageurl");
      $(this).prevAll().css("background-image", "imageurl");
    });
  });
</script>

那应该解决你的问题

Answer 3

我相信您的方向是正确的。 HTML

<div id="stars">
    <div class="star">
      <div class="star">
        <div class="star">
            <div class="star">
                <div id="innermost" class="star">
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.star {
display:block;
width:20px;
height:20px;
margin:0px;
padding-left:20px;
background:#00f;
border-left:1px solid #f00;
}
#innermost {padding-left:0px;}
#stars .star:hover{background:#ff0;}

http://jsfiddle.net/MpmMa/

Answer 4

我知道您有一个可以接受的答案，但是您无需更改HTML结构，只需稍微更改一下CSS：

.clearfix div {
    float:right;        /* changed from left to right */
    position:relative;
}

.star:hover,
.star:hover ~ .star {      /*  add sibling combinator */
    ...
}

当然，您将不得不在“ oh no”和“ thank”之间切换，但这是一种更为整洁的方法。

工作示例： http : //jsfiddle.net/LL9pH/8/