cssホバー上のアイコンを変更+チェック

Question

私は3つの心の評価システムに取り組んでいます。私はフォントの素晴らしい心のアイコン（完全なものと空のもの）を使用しています。私は、2番目と3番目の心臓が、宙に浮かんでチェックされたときに空から完全に変化するようにしたい。

私がこれまで持っていることは次のとおりです。心が推移またはクリック（=確認）されている場合

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は、あなたがそれに導かれ得ることができます：

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; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- A <input> and a <i> for each rate value. In this example they must been in this order. --> 
 
<input class="rate" name="rate" type="radio" value="1"> 
 
<i class="fa fa-star-o" aria-hidden="true"></i> 
 
<input class="rate" name="rate" type="radio" value="2"> 
 
<i class="fa fa-star-o" aria-hidden="true"></i> 
 
<input class="rate" name="rate" type="radio" value="3"> 
 
<i class="fa fa-star-o" aria-hidden="true"></i> 
 
<input class="rate" name="rate" type="radio" value="4"> 
 
<i class="fa fa-star-o" aria-hidden="true"></i> 
 
<input class="rate" name="rate" type="radio" value="5"> 
 
<i class="fa fa-star-o" aria-hidden="true"></i>