Как я могу изменить цвет звезд при наведении мыши в этом JS ???

Question

Я получил звездный рейтинг js от http://nofunc.org/AJAX_Star_Rating/

Этот JS работает только с двумя цветами: красным и синим. Когда человек перемещает свою мышь по звездам, тогда первоначальный рейтинг скрывается, а при перемещении мыши отображается новый рейтинг, то есть, если мы перемещаем мышь по звездам, то мы не можем видеть исходный рейтинг, если не отведем мышь от звезд. Я хочу, чтобы, когда человек двигал мышью, исходный рейтинг отображался светлым цветом, а тот, который мы делаем, должен быть темного цвета (а не красного, как цвет отображения с фиксированным рейтингом), и как только мы его исправим затем он будет отображаться в том же красном и синем цветах. Как я могу сделать это сейчас? Я устал играть с CSS и JS, но это не помогло, потому что я не очень хорош в этом :( Помощь будет высоко оценена !!

P.S. пожалуйста, не предлагайте несколько больших js, поскольку я не могу пойти на них ... Мне нужен js как можно меньше для этого рейтинга, поэтому я выбрал этот nofunc js .....

Answer 1

привет, я думаю, этот урок поможет вам. http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/

Answer 2

попробуйте это.это то, что я сделал для веб-сайта

html code

<div id="rating">
    <div id="star1">
        <img src="images/on.png" alt="1"/>
    </div>
    <div id="star2">
        <img src="images/on.png" alt="2"/>
    </div>
    <div id="star3">
        <img src="images/on.png" alt="3"/>
    </div>
    <div id="star4">
        <img src="images/on.png" alt="4"/>
    </div>
    <div id="star5">
        <img src="images/on.png" alt="5"/>
    </div>
</div>
<input type="hidden" name="ratingval" id="ratingval" value="0" />

js script

$(document).ready(function(){
    stars = ['off','off','off','off','off','off'];  
    clearRating();

    $('#star1 img').click(function(){ rateTheStar(1);});
    $('#star2 img').click(function(){ rateTheStar(2);});
    $('#star3 img').click(function(){ rateTheStar(3);});
    $('#star4 img').click(function(){ rateTheStar(4);});
    $('#star5 img').click(function(){ rateTheStar(5);});
});


// Bl holder functions 

function clearRating()  {
    count = 1;
    for(count = 1; count <= 5; count++) {
        strTarget = '#star'+count+' img';
        $(strTarget).animate({'opacity':0});
    }
}

function rateTheStar(targetno)  {
        if(stars[targetno] == 'off')    {

            target = '';
            i = 0;
            j = 0;

            for(j = 1; j <= targetno; j++)  {
                target = '#star'+j+' img';
                stars[j] = 'on';
                $(target).animate({'opacity':1},'slow');
            }
            document.getElementById('ratingval').value = targetno;
            for(i = targetno+1; i <= 5; i++)    {
                str = '#star'+i+' img';
                $(str).animate({'opacity':0},'slow');
            }
            //alert(stars[1]+" "+stars[2]+" "+stars[3]+" "+stars[4]+" "+stars[5]);
        }
        else if(stars[targetno] == 'on')    {
            document.getElementById('ratingval').value = targetno;
            i = 0;
            newTargetNo = targetno + 1;
            for(i = newTargetNo; i <= 5; i++)   {
                str = '#star'+i+' img';
                stars[i] = 'off';
                $(str).animate({'opacity':0},'slow');
            }
        }
    }

css file

#rating {
    width:120px;
    height:34px;
    display:inline;
    overflow:hidden;
    display:block;
}

#rating img {
    background-image:url(../images/off.png);
}


#star1  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

#star2  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

#star3  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

#star4  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

#star5  {
    width:20px;
    height:32px;
    float:left;
    background-image:url(../images/off.png);
}

images: http://thewoodhouse.net/jukebox/images/on.png и http://thewoodhouse.net/jukebox/images/off.png

вы можете попробовать код в этом файле HTML образца http://thewoodhouse.net/jukebox/admin.html