基于悬停元素添加多个样式

Question

我目前有以下HTML布局:

<!-- start stars -->
<span class="spr-starratings spr-review-header-starratings" style="margin-left: 20px;">
    <i class="spr-icon spr-icon-star"></i>
    <i class="spr-icon spr-icon-star"></i>
    <i class="spr-icon spr-icon-star"></i>
    <i class="spr-icon spr-icon-star"></i>
    <i class="spr-icon spr-icon-star"></i>
</span>
<!-- end stars -->

例如; 如果第四个<i>是徘徊,我希望前3加1动态添加一些CSS color: #f2d253;,然后当从那个星上删除光标时,我希望它重置样式.

如果可能,我想用jQuery完成这个吗？

将赞赏该方向的任何一点,一个例子将受到高度赞赏

Answer 1

使用纯CSS也可以这样做:http://jsfiddle.net/4rpw7/.

HTML:

<span>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
</span>

CSS:

span {
    display: inline-block;
    outline: 1px solid red;
    padding: 5px;
}

span > i {
    float: right;
    height: 20px;
    width: 20px;
    outline: 1px solid blue;
    cursor: pointer;
}

span > i:not(:last-child) {
    margin-left: 10px;
}

span > i:hover, span > i:hover ~ i {
    background-color: blue;
}