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

时间：2020-04-17 00:23:10

标签： javascript jquery class svg hover

我有一个带有星号的代码，可以对内容进行投票。

在我将图标更改为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>

2 个答案:

答案 0 :(得分：0)

刚才对此进行了测试，mouseover和click事件都可以正常工作：

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

答案 1 :(得分：0)

您的代码运行正常。但是您需要删除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>

相关问题
最新问题