我该如何改变鼠标悬停在这个js上星星的颜色？

问题描述：

我从http://nofunc.org/AJAX_Star_Rating/得到了一个星级js我该如何改变鼠标悬停在这个js上星星的颜色？

这个js只有两种颜色，红色和蓝色。当一个人在星星上移动鼠标时，原始评分会隐藏起来，鼠标移动时会显示新的评分，也就是说，如果我们将鼠标移动到星星上，除非我们将鼠标移离星星，否则我们无法看到原始评分。我想要的是，当一个人移动他的鼠标时，原来的评级应该用浅色表示，而我们所做的应该用深色（不是红色，因为它是固定评级显示的颜色），一旦我们修复然后它以相同的红色和蓝色的颜色显示出来。我现在怎么办？我累了与CSS发挥和JS但它没有帮助，因为即时通讯在它不是很好:( 帮助将非常aprreciated！

PS 请不要提出一些大的js的，因为我不能去他们。 ..我需要一个JS小，因为它可以为这个评价件事就是为什么我选择这个nofunc JS .....

我有很多问题找到一个很好的评级插件。他们中的大多数是紧凑和有限的，或更大和越野车。 NoFunc的很不错，但有点难以定制。我发现改变NoFunc系统基本上涉及了解它并重写整个事情。这并不容易。不过，我有不同的目标，所以我认为我的版本不会有帮助。 – Cole 2010-07-16 03:37:04

答

试试这个。这是我做的一个网站

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

这是使用jquery完成的... – 2010-07-15 08:03:54

我的问题仍然与此代码remians。我想要的是，当一个人移动他的鼠标，然后原来的评级应显示在一些浅色和我们正在做的应该深色，一旦我们修好它，然后它沉浸在soem其他颜色。 – developer 2010-07-15 08:57:34

星星图片，如果你想添加悬停效果创建一个新的图像，你需要哪种颜色，并在鼠标上添加一个新事件 – 2010-07-15 10:11:37

答

你好，我想这个教程将帮助您其一个不错的 http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/

我该如何改变鼠标悬停在这个js上星星的颜色？

相关推荐