javascript - jQuery -> mouseEnter 更改 css 直到数字

Question

我有 CSS 和 jQuery 代码。我想做的是:

在星形鼠标输入时，淡入。如果id=4的星星悬停，则淡入4之前的所有星星，如果直到3，则仅淡出前3颗星星。这是我的代码:

<script type="text/javascript">
    $(document).ready(function(){

        var rating = $('#rating').val();
        $('.giveRating').click(function(){
            var clicked = $(this).attr('id');
            $('#rating').val(clicked);
            $(this).css({opacity: 1});
            $(this).prevAll('.giveRating').css({opacity:1});
        })

        //Change css on mouseEnter to new CSS
        $('.giveRating').mouseenter(function(){
            $(this).prevAll('.giveRating').css({opacity:1});
            $(this).css({opacity: 1});

        });

        //Change CSS on mouseLeave to old CSS
        $('.giveRating').mouseleave(function(){
            $('.giveRating').css({opacity: 0.5});
        });
    });
</script>

echo '<img class="giveRating" id="1" src="'.url('images/pages/reviews/star.png').'">';
echo '<img class="giveRating" id="2" src="'.url('images/pages/reviews/star.png').'">';
echo '<img class="giveRating" id="3" src="'.url('images/pages/reviews/star.png').'">';
echo '<img class="giveRating" id="4" src="'.url('images/pages/reviews/star.png').'">';
echo '<img class="giveRating" id="5" src="'.url('images/pages/reviews/star.png').'">';

Answer 1

这应该会让您了解如何开始。

$(document).ready(function(){

        var rating = $('#rating').val();
        $('.giveRating').click(function(){
            var clicked = $(this).attr('id');
            $('#rating').val(clicked);
        })

        //Change css on mouseEnter to new CSS
        $('.giveRating').mouseenter(function(){
            $(this).prevAll('.giveRating').css({opacity:1});
            $(this).css({opacity: 1});
        });

        //Change CSS on mouseLeave to old CSS
        $('.giveRating').mouseleave(function(){
            $('.giveRating').css({opacity: 0.5});
        });
    });

http://jsfiddle.net/sP4GZ/

更新(点击功能)

$(document).ready(function(){
    var timeOut;
    var hasClicked;

        var rating = $('#rating').val();
        $('.giveRating').click(function(){
            hasClicked = true;
            var clicked = $(this).attr('id');
            clicked.prevAll('.giveRating').css({opacity:1});
            clicked.css({opacity: 1});
            $('#rating').val(clicked);
        })

        //Change css on mouseEnter to new CSS
        $('.giveRating').mouseenter(function(){
            clearTimeout(timeOut);
            $(this).prevAll('.giveRating').css({opacity:1});
            $(this).css({opacity: 1});
            $(this).nextAll('.giveRating').css({opacity:0.5});
        });

        //Change CSS on mouseLeave to old CSS
        $('.giveRating').mouseleave(function(){
            if(!hasClicked){
                timeOut = setTimeout(function(){
                    $('.giveRating').css({opacity: 0.5});
                },200);
            }
            hasClicked = false;
        });
    });

http://jsfiddle.net/sP4GZ/2/

更新3

http://jsfiddle.net/v69Dw/