CODEWITHSUNDEEP
javascriptjquerycss
Donny van V
Donny van V

Reputation: 981

jQuery -> mouseEnter change css till number

I have a CSS and jQuery code. What I want to do is:

On star mouse enter, fade in. If the star with id=4 is hovered, fade in all stars before 4, if till 3, then only fade in first 3 stars. Here is my code:

<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').'">';

Upvotes: 2

Views: 103

Answers (1)

Trevor
Trevor

Reputation: 16116

This should give you an idea of how to start. 

$(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/

Update (Click functionality)

$(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/

Update 3

http://jsfiddle.net/v69Dw/

Upvotes: 2

Related Questions