andrey3681,
скорее всего mouseenter не срабатывает, и менять html на который всё завязано на каждый чих, не особо разумно.
вариант близкий к вашему (из вашего и нашего
)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.edit_user_rating{
text-align:center;
width:200px;
background:#000;
height:50px;
}
.rating_star{
display:inline-block;
transition:0.2s;
color:#737373;
}
.rating_star>span{
position:relative;
font-size:25px;
height:0.1px;
transition:0.2s;
cursor:pointer;
}
.rating_star:hover>span:before,.rating_star>span.star_select:before{
content:"\2605";
position:absolute;
color:#FEDF69;
transition:0.2s;
}
.rating_star>span:before,.rating_star:hover>span:hover~span:before{
transition:0s;
color:transparent;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function () {
$('.edit_user_rating').on('click', '.rating_star span', function (event) {
event.preventDefault();
var parent = $(this).parent().addClass('select')
var $span = parent.find('span').removeClass('star_select');
var rating = $span.index(this);
$span.slice(0,++rating).addClass('star_select');
alert(rating);
})
})
</script>
</head>
<body>
<div class="edit_user_rating">
<div class="rating_star">
<span class="star_select">☆</span><span class="star_select">☆</span><span>☆</span><span >☆</span><span>☆</span>
</div>
</div>
<br>
<div class="edit_user_rating">
<div class="rating_star">
<span>☆</span><span>☆</span><span>☆</span><span >☆</span><span>☆</span>
</div>
</div>
<br>
<div class="edit_user_rating">
<div class="rating_star">
<span class="star_select">☆</span><span class="star_select">☆</span><span class="star_select">☆</span><span >☆</span><span>☆</span>
</div>
</div>
<br>
</body>
</html>