与悬停和取消选择的评级明星问题

Question

我在我的应用程序中实施了评级星级系统，但我有两个问题。

首先，当我将鼠标悬停在选定的星形上时，它显示它悬停，但它应该显示它被选中。我尝试改变选定班级的z-index，但它并没有帮助

其次，当我试图从5星改变为1星时，它不会取消选择星星。任何帮助将不胜感激

HTML：

<ul class="rating-stars"> 
    <li> 
     <input id="rating_1" name="rating" type="radio" value="1"> 
     <label class="rating is-active" for="rating_1" title="1 Star"> 
      <span class="text">1 Star</span> 
     </label> 
    <li> 
     <input id="rating_2" name="rating" type="radio" value="2"> 
     <label class="rating is-active" for="rating_2" title="2 Star"> 
      <span class="text">2 Star</span> 
     </label> 
    <li> 
     <input id="rating_3" name="rating" type="radio" value="3"> 
     <label class="rating is-active" for="rating_3" title="3 Star"> 
      <span class="text">3 Star</span> 
     </label> 
    <li> 
     <input id="rating_4" name="rating" type="radio" value="4"> 
     <label class="rating" for="rating_4" title="4 Star"> 
      <span class="text">4 Star</span> 
     </label> 
    <li> 
     <input checked="checked" id="rating_5" name="rating" type="radio" value="5"> 
     <label class="rating" for="rating_5" title="5 Star"> 
      <span class="text">5 Star</span> 
     </label> 
</ul> 

$(".rating-stars li").mouseenter(function() { 
    $(this).children(".rating").addClass("is-hovered"); 
    $(this).prevAll("li").children(".rating").addClass("is-hovered"); 
}).mouseleave(function() { 
    $(".rating-stars li").each(function() { 
     $(this).children(".rating").removeClass("is-hovered"); 
    }); 
}); 

JS：

$(".rating-stars li").click(function() { 
    $(".rating-stars li").children(".rating.current").removeClass("is-active"); 
    $(this).children(".rating").addClass("is-active") 
    $(this).prevAll("li").children(".rating").addClass("is-active"); 
}); 

JSFiddle Demo

Answer 1

$(".rating-stars li").mouseenter(function() { 
 
    $(this).children(".rating").addClass("is-hovered"); 
 
    $(this).prevAll("li").children(".rating").addClass("is-hovered"); 
 
}).mouseleave(function() { 
 
    $(".rating-stars li").each(function() { 
 
    $(this).children(".rating").removeClass("is-hovered"); 
 
    }); 
 
}); 
 

 
$(".rating-stars li").click(function() { 
 
    $(".rating-stars li").children(".rating.is-active").removeClass("is-active"); 
 
    $(this).children(".rating").addClass("is-active") 
 
    $(this).prevAll("li").children(".rating").addClass("is-active"); 
 
});

.rating-stars { 
 
    list-style: none; 
 
    margin: 0 0 20px 0; 
 
} 
 

 
.rating-stars li { 
 
    float: left; 
 
} 
 

 
.rating-stars .text, 
 
.rating-stars [type=radio] { 
 
    position: absolute; 
 
    left: -5000px; 
 
} 
 

 
.rating-stars .rating { 
 
    display: block; 
 
    width: 16px; 
 
    height: 16px; 
 
    background: url(http://i64.tinypic.com/2mnep79.png) center 0 no-repeat; 
 
} 
 

 
.rating-stars .is-active { 
 
    background-position: center -16px; 
 
    opacity: 1; 
 
} 
 

 
.rating-stars .is-hovered { 
 
    background-position: center -16px; 
 
    opacity: 0.4; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="rating-stars"> 
 
    <li> 
 
    <input id="rating_1" name="rating" type="radio" value="1"> 
 
    <label class="rating is-active" for="rating_1" title="1 Star"><span class="text">1 Star</span> 
 
\t \t \t \t \t </label></li> 
 
    <li> 
 
    <input id="rating_2" name="rating" type="radio" value="2"> 
 
    <label class="rating is-active" for="rating_2" title="2 Star"><span class="text">2 Star</span> 
 
\t \t \t \t \t </label></li> 
 
    <li> 
 
    <input id="rating_3" name="rating" type="radio" value="3"> 
 
    <label class="rating is-active" for="rating_3" title="3 Star"><span class="text">3 Star</span> 
 
\t \t \t \t \t </label></li> 
 
    <li> 
 
    <input id="rating_4" name="rating" type="radio" value="4"> 
 
    <label class="rating" for="rating_4" title="4 Star"><span class="text">4 Star</span> 
 
\t \t \t \t \t </label></li> 
 
    <li> 
 
    <input checked="checked" id="rating_5" name="rating" type="radio" value="5"> 
 
    <label class="rating" for="rating_5" title="5 Star"><span class="text">5 Star</span> 
 
\t \t \t \t \t </label></li> 
 
</ul>

用途：

$(".rating-stars li").click(function() { 
    $(".rating-stars li").children(".rating.is-active").removeClass("is-active"); 
    $(this).children(".rating").addClass("is-active") 
    $(this).prevAll("li").children(".rating").addClass("is-active"); 
}); 

要取消选择