jquery - 将鼠标悬停在右侧的元素上会触发元素向左的 css 更改

Question

我正在尝试构建自定义评级模块来支持我的需求。我有一排 5 个不同的标准 - 如果您将鼠标悬停在第 2 列的标准上 - 第 2 列星号和第 1 列星号都应该改变它的颜色。第 5 - 第 5、第 4、第 3、第 2 和第 1 列星相同，应该改变它的颜色。

有什么想法可以实现吗？这是代码:

    <div class="row">
<div class="col-xs-20 col-md-20 ratingi">
<p> <small> Oceń: </small></p>
<p> <strong> Smak posiłku: </strong> </p>
</div>
<div class="col-xs-20 col-md-20 ratingi">
<p><small> niejadalne </small> </p>
<h3> <i class="fa fa-star"></i></h3>
</div>
<div class="col-xs-20 col-md-20 ratingi">
<p><small> niesmaczne </small> </p>
<h3> <i class="fa fa-star"></i></h3>
</div>
<div class="col-xs-20 col-md-20 ratingi">
<p> <small>takie sobie </small> </p>
<h3> <i class="fa fa-star"></i></h3>
</div>
<div class="col-xs-20 col-md-20 ratingi">
<p> <small>smaczne </small> </p>
<h3> <i class="fa fa-star"></i></h3>
</div>
<div class="col-xs-20 col-md-20 ratingi">
<p> <small>palce lizać</small> </p>
<h3> <i class="fa fa-star"></i></h3>
</div>
<div class="col-xs-20 col-md-20 ratingi">
<p> <small>Nie chcę oceniać</small> </p>
<p> <input type="checkbox" name="brakoceny" value="skip"></p>
</div>
</div>

CSS:

.col-xs-20,
.col-sm-20,
.col-md-20,
.col-lg-20 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-20 {
     width: 14.25%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-20 {
         width: 14.25%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-20 {
         width: 14.25%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-20 {
        width: 14.25%;
        float: left;
    }
}

.ratingi i {
color: #D1D1D1; 
}

.ratingi i:hover {
color: #5cb85c; 
cursor:pointer;
}

和一把 fiddle :

https://jsfiddle.net/fb897pLm/

Answer 1

可以用 jQuery 做到这一点。我在 CODEPEN 中创建了一个工作示例.单击元素后甚至可以产生悬停效果。

HTML

<ul>
  <li data-status="0">
    <i class="fa fa-star-o"></i>
  </li>
  <li data-status="0">
    <i class="fa fa-star-o"></i>
  </li>
  <li data-status="0">
    <i class="fa fa-star-o"></i>
  </li>
  <li data-status="0">
    <i class="fa fa-star-o"></i>
  </li>
  <li data-status="0">
    <i class="fa fa-star-o" data-status="0"></i>
  </li>
</ul>

CSS

ul{
  width: 100%;
  text-align: center;
}
li {
 decoration: none;
 list-style-type: none;
 display: inline-block;
 margin: 3px;
 font-size: 2.5em;
 cursor: pointer;
}

jQuery

$(document).ready(function() {

 $("ul li").mouseenter(function () {
    var $Sel = $(this).closest("ul");

    // removing existing fa-star classes on all <li> tags
    $Sel.children("li").each(function () {
        $(this).find("i").removeClass("fa-star").addClass("fa-star-o");
    });

    // applying new condition
    for (i = 0; i <= $(this).index() ; i++) {
        $Sel.find("li").eq(i).find("i")
            .removeClass("fa-star-o")
            .addClass("fa-star");
    }
 });


 $("ul li").mouseleave(function () {
    var $Sel = $(this).closest("ul");
    for (i = 0; i <= 4; i++) {

        if (($Sel.find("li").eq(i).attr("data-status") * 1) == 0) {
            $Sel.find("li").eq(i).find("i")
            .addClass("fa-star-o")
            .removeClass("fa-star");
        } else {
            $Sel.find("li").eq(i).find("i")
            .removeClass("fa-star-o")
            .addClass("fa-star");
        }

    }
  });


 $(document).on("click", "ul li", function (event) {

    var $Sel = $(this).closest("ul");

    for (i = 0; i <= 4; i++) {
        if (i <= $(this).index()) {
            $Sel.find("li").eq(i)
            .attr("data-status", 1)
            .children("i")
                .removeClass("fa-star-o")
                .addClass("fa-star");
        } else {
            $Sel.find("li").eq(i)
            .attr("data-status", 0)
            .children("i")
                .addClass("fa-star-o")
                .removeClass("fa-star");
        }
    }
});

});