Изменить цвет при наведении на иконку SVG - PullRequest
Новая
       32

Изменить цвет при наведении на иконку SVG

0 голосов
/ 17 апреля 2020

У меня есть код со звездами для голосования по содержимому.

Он работал нормально, пока я не изменил значки на 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 голосов
/ 17 апреля 2020

Ваш код работает нормально. Но вам нужно удалить 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>
0 голосов
/ 17 апреля 2020

Только что протестировано, события mouseover и click работают нормально: 

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