将悬停时的颜色更改为图标svg

Question

我有一个用星号来投票内容的代码。

在我将图标更改为svg之前，它工作得很好，它不会检测到此类图标中的悬停或点击，但在此之前，使用<i>图标，它确实可以工作。

我能做什么?

代码如下：

<div class="center l" id="votes">
    <span class="sepleftright">Vote: </span>
<svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-1"></i> -->
<svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-2" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-2"></i> -->
<svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-3" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-3"></i> -->
<svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-4" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-4"></i> -->
<svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-5" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg=""><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path></svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-5"></i> -->
</div>

我的javascript代码：

<script>
$(document).ready(function(){
  $("#v-1,#v-2,#v-3,#v-4,#v-5").hover(function () {
    var val = $(this).attr('id');
    var orden = val.split("-");
    for (var i = 0; i <= 5; i++) {
        if (i <= orden[1]) $("#v-" + i + "").addClass( "tnrnj" );
        else $("#v-" + i + "").removeClass( "tnrnj" );
     }

  });
  $("#v-1,#v-2,#v-3,#v-4,#v-5").click(function () {
    var val = $(this).attr('id');
    $.post("/jx/vote.php", {  vote: val }, function(data){
      $("#votes").html(data);
    });
  });
});
</script>

Answer 1

刚刚测试过了，mouseover和click事件都运行正常：

let v1 = document.getElementById('v-1');
v1('mouseover', () => console.log('v-1 mouseover'));
v1('click', () => console.log('v-1 click'));

Answer 2

您的代码运行良好。但您需要删除fill="currentColor"才能看到更改。如果不是，则<path>元素的填充将始终为"currentColor“。

下面是一个工作示例：

​

$(document).ready(function(){
  $("#v-1,#v-2,#v-3,#v-4,#v-5").hover(function () {
    var val = $(this).attr('id');
    var orden = val.split("-");
    for (var i = 0; i <= 5; i++) {
        if (i <= orden[1]) $("#v-" + i + "").addClass( "tnrnj" );
        else $("#v-" + i + "").removeClass( "tnrnj" );
     }

  });
  $("#v-1,#v-2,#v-3,#v-4,#v-5").click(function () {
    var val = $(this).attr('id');
    /*$.post("/jx/vote.php", {  vote: val }, function(data){
      $("#votes").html(data);
    });
    */
    alert(val);
  });
});

.fa-star {
  max-width: 100px;
  height: auto;
  fill: #000000;
}

.tnrnj {
  fill: #FFFF00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="center l" id="votes">
  <span class="sepleftright">Vote: </span>
  <svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
    <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
  </svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-1"></i> -->
  <svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-2" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
    <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
  </svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-2"></i> -->
  <svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-3" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
    <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
  </svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-3"></i> -->
  <svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-4" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
    <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
  </svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-4"></i> -->
  <svg class="svg-inline--fa fa-star fa-w-18 pntr tgrsstrng" id="v-5" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="star" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
    <path d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"></path>
  </svg><!-- <i class="fas fa-star pntr tgrsstrng" id="v-5"></i> -->
</div>

​