Question

我正在研究一个有三颗心的评级系统。我正在使用字体很棒的心脏图标（完整和空的）。我希望第二和第三颗心在悬停和检查时从空变为满。

到目前为止我所拥有的是：

HTML

<section class="rating">

<p class="check" id="like">

          <!-- THIRD HEART -->
          <input type="radio" id="heart_3" name="like" value="3" />
          <label for="heart_3" class="heart-slider" data-hover="<i class='fa fa-heart' aria-hidden='true'></i>"><i class="fa fa-heart-o" aria-hidden="true"></i></label>

          <!-- SECOND HEART -->
          <input type="radio" id="heart_2" name="like" value="2" />
          <label for="heart_2" class="heart-slider" data-hover="<i class='fa fa-heart' aria-hidden='true'></i>"><i class="fa fa-heart-o" aria-hidden="true"></i></label>

          <!-- FIRST HEART -->
          <input type="radio" id="heart_1" name="like" value="1" checked="checked" />
          <label for="heart_1" class="heart-slider"><i class="fa fa-heart" aria-hidden="true"></i></label>

          </p>

</section>

CSS

.rating {
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 180px;
  height: 85px;
  padding: 15px 10px;
  margin: auto;
  border-radius: 30px;
  background: transparent;
  border-radius: 45px;
  display: block;
  overflow: hidden;
  border: 1px white solid;
}


.check:not(:checked) > input {
  display: none;
}

/* - - - - - LIKE */
#like {
}
#like:not(:checked) > label {
  content: '';
  cursor:pointer;
  float: right;
  width: 30px;
  height: 30px;
  display: inline-block;

}
#like:not(:checked) > label:hover,
#like:not(:checked) > label:hover ~ label {
  content: attr(data-hover);

}
#like > input:checked + label:hover,
#like > input:checked + label:hover ~ label,
#like > input:checked ~ label:hover,
#like > input:checked ~ label:hover ~ label,
#like > label:hover ~ input:checked ~ label {
 content: attr(data-hover);


}
#like > input:checked ~ label {
  content: attr(data-hover);

}

当心脏被徘徊或点击（=检查）时，没有任何事情发生。我错过了什么？

Answer 1

这不可能像这样使用CSS交换元素的HTML。您需要使用类似jQuery的东西来替换HTML。

查看jQuery中的:checked选择器，并在选中时使用replaceWith()函数交换元素。

像（未经测试但是示例）......

$(".heart-1").is(":checked", function() {

    $(this).replaceWith("<i class='fa fa-heart heart-2' aria-hidden='true'></i>");

}), (function() {

    $(this).replaceWith("<i class='fa fa-heart heart-1' aria-hidden='true'></i>");

});

Answer 2

丹尼尔詹姆斯的反应是对的，如果没有一些JS，你就不能在悬停时做出改变。

虽然我受到了你的启发，但由于时间关系，我不能更快地做到这一点，但是这是我的rating system，你可以得到它的指导：

/vqmod/xml/seo_mega_pack.xml

function click() {
  var input = $(this).prev();
  var max_value = parseInt(input.val());
  
  
  // We select the input of the clicked label to get actual checked value.
  input.click();
  // For each "rate":
  $.each($(".fa"), function() {
    // If we don't overpassed the maximum value (aka the clicked "rate" value) we activate the "rate".
    if (parseInt($(this).prev().val()) <= max_value) {
      $(this).removeClass("fa-star-o").addClass("fa-star");
    }
  });
}

function hover_in() {
  // This function is the same as "click()", but we don't check the associated input.
  var max_value = parseInt($(this).prev().val());
  
  
  $.each($(".fa"), function() {
    if (parseInt($(this).prev().val()) <= max_value) {
      $(this).removeClass("fa-star-o").addClass("fa-star");
    }
  });
}

function hover_out() {
  // We get the max rate checked (0 if there isn't anyone).
  var max_value = parseInt($("[name='rate']:checked").val()) || 0;
  
 
  $.each($(".fa"), function() {
    // If this "rate" is greater than the checked one, deselect it.
    if (parseInt($(this).prev().val()) > max_value) {
      $(this).removeClass("fa-star").addClass("fa-star-o");
    }
  });
}


$(document).ready(function() {
  $(".fa").click(click).hover(hover_in, hover_out);
})

/* To hide the inputs. */
.rate {
  /* Box-model */
  display: none;
}

css在悬停+更改时更改图标

2 个答案: