將 hover 上的顏色更改為圖標 svg

Question

我有一個帶有星星的代碼來投票內容。

在我將圖標更改為 svg 之前它工作正常，它沒有檢測到 hover 或單擊此類圖標，但之前使用<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>