Star Rating

DEMO

CODE

<div class="demo-stage"><div class="sr-stars" id="srStars"><span class="sr-star">★</span><span class="sr-star">★</span><span class="sr-star">★</span><span class="sr-star">★</span><span class="sr-star">★</span></div><div class="sr-label" id="srLabel">星を選択してください</div></div>

.demo-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem; padding:3rem; }
.sr-stars { display:flex; gap:.5rem; }
.sr-star { font-size:2.8rem; color:#E5E5E5; cursor:pointer; transition:color .15s ease, transform .15s ease; }
.sr-star.on { color:#E91B89; }
.sr-star:hover { transform:scale(1.22); }
.sr-label { font-family:'Oswald',sans-serif; letter-spacing:.2em; color:#5A5A5A; font-size:.9rem; }

const srStars = document.querySelectorAll('.sr-star');
const srLabel = document.getElementById('srLabel');
const srWrap = document.getElementById('srStars');
let srRating = 0;
function srPaint(n){
  srStars.forEach(function(s, j){ s.classList.toggle('on', j < n); });
}
srStars.forEach(function(star, i){
  star.addEventListener('mouseenter', function(){ srPaint(i + 1); });
  star.addEventListener('click', function(){
    srRating = i + 1;
    srPaint(srRating);
    srLabel.textContent = srRating + ' / 5 で評価しました';
  });
});
srWrap.addEventListener('mouseleave', function(){ srPaint(srRating); });

AI PROMPT

インタラクティブな星評価を作って。★を5つ並べ、初期色グレー。各星のmouseenterでその位置までを.onクラスでピンク点灯、clickで評価を確定して保持。コンテナのmouseleaveで確定値まで戻す。ホバー中の星はscale(1.22)で拡大。確定値はラベルに表示。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。