用户评星
效果
页面结构
<div class="evaluation"> <i class="iconfont"></i> <i class="iconfont"></i> <i class="iconfont"></i> <i class="iconfont"></i> <i class="iconfont"></i> <p></p> </div>
这里我引用的是字体图标
css样式
@font-face {font-family: "iconfont"; src: url('../fonts/iconfont.eot?t=1484033191829'); /* IE9*/ src: url('../fonts/iconfont.eot?t=1484033191829#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/iconfont.woff?t=1484033191829') format('woff'), /* chrome, firefox */ url('../fonts/iconfont.ttf?t=1484033191829') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('../fonts/iconfont.svg?t=1484033191829#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color:#bfbfbf; } .icon-star:before { content: "\e641"; } .yollew{ color:#f0db18; } .evaluation{ width: 300px; margin:200px auto; } .evaluation i{ cursor: pointer; }
引入的部分<link rel="stylesheet" href="css/index.css" /> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
js部分
<script type="text/javascript"> $(".evaluation i").hover(function(){ var _index = $(this).index()+1; $(this).addClass("yollew"); $(this).prevAll("i").addClass("yollew").end().nextAll("i").removeClass("yollew"); $(".evaluation p").text(_index+"分"); }) </script>