-1
我目前正在致力於留言,我想創建一個星級評分系統。但我卡住了!當我點擊它們時,我無法修復恆星,使它們保持黃色(gelb)。星級評分系統html
這是到目前爲止我的代碼:
<div class="rating">
<p id="rating-paragraph">Rate</p>
<img id="stern1" src="pictures/durchsichtig.png" onmouseover="stern1.src='pictures/gelb.png'" onmouseout="stern1.src='pictures/durchsichtig.png'" alt="error"> <?php ?>
<img id="stern2" src="pictures/durchsichtig.png" onmouseover="stern1.src='pictures/gelb.png'; this.src='pictures/gelb.png'" onmouseout="stern1.src='pictures/durchsichtig.png'; this.src='pictures/durchsichtig.png'" alt="error">
<img id="stern3" src="pictures/durchsichtig.png" onmouseover="stern1.src='pictures/gelb.png'; stern2.src='pictures/gelb.png'; this.src='pictures/gelb.png' " onmouseout="stern1.src='pictures/durchsichtig.png';stern2.src='pictures/durchsichtig.png'; this.src='pictures/durchsichtig.png' " alt="error">
<img id="stern4" src="pictures/durchsichtig.png" onmouseover="stern1.src='pictures/gelb.png'; stern2.src='pictures/gelb.png'; stern3.src='pictures/gelb.png'; this.src='pictures/gelb.png' " onmouseout="stern1.src='pictures/durchsichtig.png';stern2.src='pictures/durchsichtig.png'; stern3.src='pictures/durchsichtig.png';this.src='pictures/durchsichtig.png' " alt="error">
<img id="stern5" src="pictures/durchsichtig.png" onmouseover="stern1.src='pictures/gelb.png'; stern2.src='pictures/gelb.png'; stern3.src='pictures/gelb.png'; stern4.src='pictures/gelb.png'; this.src='pictures/gelb.png' " onmouseout="stern1.src='pictures/durchsichtig.png';stern2.src='pictures/durchsichtig.png'; stern3.src='pictures/durchsichtig.png';stern4.src='pictures/durchsichtig.png'; this.src='pictures/durchsichtig.png' " alt="error">
</div>
和CSS:
#stern1:hover, #stern2:hover, #stern3:hover, #stern4:hover, #stern5:hover{ cursor: pointer; }
感謝您的時間,也許一些幫助或建議:)
歡迎堆棧溢出!尋求代碼幫助的問題必須包含在問題本身中重現**所需的最短代碼**最好在[** Stack Snippet **]中(https://blog.stackoverflow.com/2014/09/introducing-runnable) -javascript-CSS-和HTML的代碼段/)。請參閱[**如何創建一個最小,完整和可驗證的示例**](http://stackoverflow.com/help/mcve) –
看起來像缺少一個點擊事件,它會翻轉圖像以使星星保持點亮。你需要一個onclick或者一個JQuery $(「#theId」)。(點擊.....讓它開始。[示例](http://callmenick.com/post/five-star-rating -component與 - JavaScript的CSS) – dpp