CSS爲5星級評分系統

我有五顆星，當鼠標懸停在鼠標懸停的星星和該星星之前的星星必須改變爲不同的顏色。 onclick事件也一樣。以下是HTML代碼。我已經嘗試了一些CSS。但我不明白該怎麼做？如何獲取CSS代碼？CSS爲5星級評分系統

<script type="text/javascript"> 
    $(document).ready(function(){ 
$("#images img").click(function(){ 
    $(this).addClass('active'); 
    var va = $(this).attr("name"); 
    $("#result_value").text(va); 
}); 
$("#images img").mouseover(function(){ 
    }); 
}); 

    $(document).on('click','#images img',function(e) { 
    var va = $(this).attr("name"); 
    $.ajax({ 
    data:' va='+va, 
    type: "post", 
    url: "insertmail.php", 
    success: function(va){ 
      alert("Data Save: " + va); 
    } 
    }); 

    }); 
    </script> 
    <style> 
    .clr:hover{ 
    background-color:#FFD700; 
    } 

    .active{ 
    background-color:#FFD700; 
     } 
    </style> 
    </head> 

<body> 
    <div class="images" id="images"> 
    <form name="imagediv" id="imagediv" method="post"> 
    <img src="star1.png" class="one clr" alt="Number 1" name="1" width="42" height="42"> 
    <img src="star2.png" class="two clr" alt="Number 1" name="2" width="42" height="42"> 
    <img src="star3.png" class="three clr" alt="Number 1" name="3" width="42" height="42"> 
    <img src="star4.png" class="four clr" alt="Number 1" name="4" width="42" height="42"> 
    <img src="star5.png" class="five clr" alt="Number 1" name="5" width="42" height="42"> 

    </form> 
</div> 
    <div class="result_value" id="result_value" ></div> 
    </body>

來源

2014-05-25 user3671365

如果您計劃使用圖像。嘗試使用圖像精靈。 http://css-tricks.com/css-sprites-with-inline-images/ – Blunderfest

你可以做一件事。爲所有星星創建單獨的點擊和懸停事件。在任何恆星的點擊事件中，它應該改變星星的顏色，其值低於點擊過的恆星和恆星本身的顏色。例如，如果單擊值爲3的星號，那麼它的單擊事件必須將星號1,2和3的級別更改爲「激活」。類似地，如果單擊星號值爲5的星號，則它必須將星級1,2,3,4,5改爲「激活」。

來源

2014-05-25 14:34:10

CSS爲5星級評分系統

回答

相關問題