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内容
<ul class="cleanfloat">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</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.展示效果
5.类似效果: html超级简单实现点赞(收藏)和取消赞效果
进阶篇之纯css+字体实现五角星(半颗星)评分
3.总结
是不是超级简单,你也可以试试哦!