包含HTML、CSS、jQuery代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<title>Document</title>
<style>
.pannel {
background-color: white;
border-radius: 3px;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}
.comment {
padding: 0 60px 0 20px;
margin-top: 20px;
}
.comment__title {
color: #666666;
font-size: 20px;
margin: 30px 0;
}
.comment__item {
display: flex;
font-size: 16px;
margin-bottom: 16px;
}
.comment__icon-k {
color: #ff6363;
margin-right: 4px;
}
.comment__v {
margin-left: 10px;
}
.comment__star {
display: inline-block;
width: 20px;
height: 20px;
background: url(https://git.oschina.net/wisetc/century-nursemaid/raw/master/assets/img/user/icon-star.png) no-repeat;
}
.comment__star.comment__star--full {
background-image: url(https://git.oschina.net/wisetc/century-nursemaid/raw/master/assets/img/user/icon-star-full.png);
}
.comment__input {
width: 100%;
height: 140px;
resize: none;
border-color: #e0e0e0;
}
.comment__input-wrap {
text-align: center;
margin-top: 50px;
margin-bottom: 48px;
}
.comment__submit {
display: inline-block;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ffb696;
color: white;
font-size: 20px;
border: none;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="comment pannel">
<h4 class="comment__title">请填写您宝贵的建议</h4>
<div class="comment__bd">
<div class="comment__item-wrap">
<div class="comment__item"><span class="comment__k"><i class="comment__icon-k">*</i>综合评分</span>
<div class="comment__v" data-star-num="0"><span class="comment__star"></span><span class="comment__star"></span><span class="comment__star"></span>
<span class="comment__star"></span><span class="comment__star"></span></div>
</div>
<div class="comment__item"><span class="comment__k"><i class="comment__icon-k">*</i>技能评分</span>
<div class="comment__v" data-star-num="0"><span class="comment__star"></span><span class="comment__star"></span><span class="comment__star"></span>
<span class="comment__star"></span><span class="comment__star"></span></div>
</div>
<div class="comment__item"><span class="comment__k"><i class="comment__icon-k">*</i>态度评分</span>
<div class="comment__v" data-star-num="0"><span class="comment__star"></span><span class="comment__star"></span><span class="comment__star"></span>
<span class="comment__star"></span><span class="comment__star"></span></div>
</div>
</div>
<textarea class="comment__input" name="" cols="30" rows="10"></textarea>
<div class="comment__input-wrap">
<input class="comment__submit" type="submit" value="提交" />
</div>
</div>
</div>
<script>
$(function () {
$('.comment__star').hover(
function () {
var filter = $(this).prevAll();
$(filter).add(this).addClass('comment__star--full');
},
function () {
var $parent = $(this).parent();
var className = 'comment__star--full';
var starNum = $parent.data('star-num');
var $origin = $parent.find('.comment__star:lt(' + starNum + ')');
// 恢复原状
$parent.find('.' + className).removeClass(className);
$origin.addClass(className);
}
);
$('.comment__star').click(function () {
var $parent = $(this).parent();
$parent.data('star-num', $(this).index() + 1);
$parent.data('pin', true);
});
});
</script>
</body>
</html>
