javascript - 根据悬浮的元素添加多种样式

我目前有以下 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 -->

例如;如果第4个<i>悬停了，我希望前3个加上那个1动态添加一些CSS color: #f2d253;，然后当从该星星中删除光标时，我希望它重置样式。

如果可能，我想使用jQuery完成此操作吗？

方向上的任何一点都将受到赞赏，一个例子将受到高度赞赏

最佳答案

也可以使用纯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;
}