Question

我正在尝试构建自定义评级模块以支持我的需求。我有一排5个不同的标准 - 如果你翻过第二列上的那个 - 第二列星和第一列的星都应该改变它的颜色。同样的第五，第五，第四，第三，第二和第一列星应该改变它的颜色。

任何想法如何实现这一目标？这是代码：

    <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;
}

和小提琴：

https://jsfiddle.net/fb897pLm/

Answer 1

可以使用jQuery来完成它。我在CODEPEN中创建了一个工作示例。点击元素后甚至可以有悬停效果。

<强> HTML

localhost

<强> CSS

<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>

<强>的jQuery

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

Answer 2

最简单的方法是制作一个数组，用于存储你的星级课程。

- ＆GT;为您的5个图标添加新类，例如s1，s2..s5，并将这些类名存储在一个数组中那么你可以使用js来检查用户正在悬停的图标，并使用你制作的数组为左边的所有元素着色。

我建议你使用jquery使它更简单。

Answer 3

你可以使用单选按钮和HTML和CSS来实现这一点。

HTML：

<div class="rating">

<input type="radio" id="stars5" name="rating" value="5">
<label for="stars5">5 stars</label>

<input type="radio" id="stars4" name="rating" value="4">
<label for="stars4">4 stars</label>

<input type="radio" id="stars3" name="rating" value="3">
<label for="stars3">3 stars</label>

<input type="radio" id="stars2" name="rating" value="2">
<label for="stars2">2 stars</label>

<input type="radio" id="stars1" name="rating" value="1">
<label for="stars1">1 star</label>

</div>

CSS：

.rating {
    float:left;
}

.rating:not(:checked) > input {
    position: absolute;
    top: -9999px;
    clip: rect(0,0,0,0);
}

.rating:not(:checked) > label {
    float: right;
    width: 1em;
    overflow: hidden;
    white-space: nowrap;
    font-size: 2rem;
    color: #ccc;
}

.rating:not(:checked) > label:before {
    content: '★';
}

.rating > input:checked ~ label {
    color: orange;
}

.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
    color: orange;
}

http://codepen.io/williamjamesclark/pen/xZJajX

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

3 个答案: