html五角星代码,五角星评分系统.html

五角星评分案例

* {

padding: 0;

margin: 0;

}

.comment {

font-size: 80px;

color: orangered;

margin-left:600px;

margin-top:200px;

}

.comment li {

float: left;

cursor: pointer;

}

ul {

list-style: none;

}

//鼠标放上去当前的li和之前的所有li内容全变成实心五角星，离开变为空心

//鼠标点击哪个li，当前li和之前所有的li变成实心五角星，其他变为空心

$(function () {

var wjx_none = '☆'; // 空心五角星

var wjx_sel = '★'; // 实心五角星

$(".comment li").on("mouseenter",function(){

$(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);

// $(this).text(wjx_sel).prevAll("li").text(wjx_sel)

// $(this).nextAll("li").text();

});

$(".comment li").on("mouseleave",function(){

if($("li.current").length===0){

$(".comment li").text(wjx_none);

}else{

$("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);

}

});

$(".comment li").on("click",function(){

$(this).attr("class","current").siblings("li").removeAttr("class","current")

});

})

• ☆
• ☆
• ☆
• ☆
• ☆

一键复制

编辑

Web IDE

原始数据

按行查看

历史