-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