.star { width:500px; border:1px solid #ccc; padding:20px; margin:50px auto; } .star .s-txt { float:left; } .star .s-xxs { display:inline-block; } .star .s-xx { float:left; color:#e3e3e3; padding-right:4px; cursor:pointer; } .star .s-haoping { color:#f13a3a; border:1px solid #f13a3a; padding:2px 4px; font-size:12px; vertical-align:super; position:relative; display:none; } .star .s-haoping .s-hp-triangle0 { border-width:4px; position:absolute; top:5px; left:-8px; border-color:transparent #f13a3a transparent transparent; border-style:dashed solid dashed dashed; } .star .s-haoping .s-hp-triangle1 { border-width:4px; position:absolute; top:5px; left:-7px; border-color:transparent #f8f8f8 transparent transparent; border-style:dashed solid dashed dashed; } .star .color-f13a3a { color:#f13a3a; }
这是使用iconfont+jquery实现的一个简单的星星评分功能。星星评分功能分两点:一点是当鼠标悬停和鼠标移出的效果为显示分数以及对应的分值描述;另外一点是当鼠标点击的时候确定分数以及对应的分值描述。本来星星是用iconfont来做的,但是好像不能上传文件,就只能用输入法输入的☆☆了。