我該如何改變鼠標懸停在這個js上星星的顏色？

Question

我從http://nofunc.org/AJAX_Star_Rating/得到了一個星級js

這個js只有兩種顏色，紅色和藍色。 當一個人在星星上移動鼠標時，原始評分會隱藏起來，鼠標移動時會顯示新的評分，也就是說，如果我們將鼠標移動到星星上，除非我們將鼠標移離星星，否則我們無法看到原始評分。 我想要的是，當一個人移動他的鼠標時，原來的評級應該用淺色表示，而我們所做的應該用深色（不是紅色，因爲它是固定評級顯示的顏色），一旦我們修復然後它以相同的紅色和藍色的顏色顯示出來。 我現在怎麼辦？我累了與CSS發揮和JS但它沒有幫助，因爲即時通訊在它不是很好:( 幫助將非常aprreciated！

PS 請不要提出一些大的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

Answer 2

你好，我想這個教程將幫助您 其一個不錯的 http://net.tutsplus.com/tutorials/html-css-techniques/building-a-5-star-rating-system-with-jquery-ajax-and-php/