您的位置：首页 > Web前端 > CSS

简单实现大方接地气的五角星评分

2017-07-28 10:17 267 查看
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.总结

是不是超级简单，你也可以试试哦！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  五角星打分 css评分
相关文章推荐
新的分享
章节导航