javascript - 我怎样才能在这个 js 中更改鼠标悬停时星星的颜色？？？

Question

我从 http://nofunc.org/AJAX_Star_Rating/ 得到了一个星级 js

此 js 仅适用于两种颜色，红色和蓝色。 当一个人将鼠标移到星星上时，原始评级会被隐藏，鼠标移动时会显示新评级，即如果我们将鼠标移到星星上，除非我们将鼠标从星星上移开，否则我们将看不到原始评级。 我想要的是，当一个人移动他的鼠标时，原始评级应该以某种浅色显示，而我们正在做的应该以深色显示(而不是红色，因为它是固定评级显示的颜色)，一旦我们修复它然后它应该以相同的红色和蓝色显示。 我现在该怎么做？我厌倦了玩 css 和 js 但它没有帮助，因为我不是很擅长:( 非常感谢您的帮助!!

附言 请不要建议一些大的 js，因为我不能为他们去...我需要一个尽可能小的 js 来进行这个评级，这就是为什么我选择这个 nofunc js.....

Answer 1

试试这个。这就是我为网站所做的

html代码

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

$(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文件

#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);
}

图像:http://thewoodhouse.net/jukebox/images/on.png和 http://thewoodhouse.net/jukebox/images/off.png

您可以尝试此示例 html 文件中的代码 http://thewoodhouse.net/jukebox/admin.html