1.前言
如何在页面中实现五角星评分呢?鼠标放上去有动态效果并可以点击。来来来,demo走起来!
2.详情
1.css样式
.cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;}
ul li{list-style:none; float:left; font-size:30px; margin:5px; color:#ccc; cursor:pointer;}
.hs,.cs{color:#f00;}
2.html内容
1 <ul class="cleanfloat">
2 <li>★</li>
3 <li>★</li>
4 <li>★</li>
5 <li>★</li>
6 <li>★</li>
7 </ul>
3.js代码
<script>
$(function () {
$("ul li").hover(function(){
$(this).addClass('hs');
$(this).prevAll().addClass('hs');
},function(){
$(this).removeClass('hs');
$(this).prevAll().removeClass('hs');
})
$("ul li").click(function () {
$(this).addClass('cs');
$(this).prevAll().addClass('cs');
$(this).nextAll().removeClass('cs');
})
})
</script>
4.展示效果
3.总结
是不是超级简单,你也可以试试哦!