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

例如;如果第4个<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;
}

Answer 2

prevAll（）应该做 - http://api.jquery.com/prevall/

Answer 3

以下是一个例子：http://jsfiddle.net/Bhq2j/

CSS：

i.highlight { color: #f2d253; }

Jquery的：

$('i').hover(
    function(){
        var prev = $(this).prevAll();
        $(this).add(prev).addClass('highlight');
    }, function() {
        $('i').removeClass('highlight');
});

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

3 个答案: