Question 195722 in Html Question posted in
Some basic documentation can be found here.

Html – Star rating on hover works from right to left instead of left to right

what is the trick to make a hover work from the leftmost toward the rightmost star?
things such as flex-direction: row-reverse; and direction: rtl; doesnt count, because they reverse the order of the stars too.

.rating-container input[type="radio"] {
  display: none;
}

.rating-container label {
  display: inline-block;
  cursor: pointer;
}

.rating-container svg {
  fill: #ccc;
}

.rating-container input[type="radio"]:checked ~ label svg,
.rating-container label:hover ~ label svg,
.rating-container label:hover svg {
  fill: #000;
}
<div id="rating-rate" class="rating-container" name="revrating">
                        <input type="radio" id="rating1" name="revrating" value="1">
                        <label for="rating1"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                        <input type="radio" id="rating2" name="revrating" value="2">
                        <label for="rating2"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                        <input type="radio" id="rating3" name="revrating" value="3">
                        <label for="rating3"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                        <input type="radio" id="rating4" name="revrating" value="4">
                        <label for="rating4"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                        <input type="radio" id="rating5" name="revrating" value="5">
                        <label for="rating5"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
                    <span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span></div>
Tags:

2

Answers


  1. 0

    You can use direction: rtl; but you need to reverse the radio value so the first one is 5 until 1 is the last

    // For testing only (To see the selected value)
setInterval(() => {  console.log(document.querySelector('input[name="revrating"]:checked')?.value)
}, 1000)
    .rating-container {
  direction: rtl;
  width: fit-content;
}

.rating-container input[type="radio"] {
  display: none;
}

.rating-container label {
  display: inline-block;
  cursor: pointer;
}

.rating-container svg {
  fill: #ccc;
}

.rating-container input[type="radio"]:checked~label svg,
.rating-container label:hover~label svg,
.rating-container label:hover svg {
  fill: #000;
}
    <div id="rating-rate" class="rating-container" name="revrating">
  <input type="radio" id="rating5" name="revrating" value="5">
  <label for="rating5"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <input type="radio" id="rating4" name="revrating" value="4">
  <label for="rating4"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <input type="radio" id="rating3" name="revrating" value="3">
  <label for="rating3"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <input type="radio" id="rating2" name="revrating" value="2">
  <label for="rating2"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <input type="radio" id="rating1" name="revrating" value="1">
  <label for="rating1"><svg aria-hidden="true" focusable="false" viewBox="1.697 1.992 11.58 11" role="img" width="24px" height="24px"><path d="M13.277 6.182 9.697 8.782 11.057 12.992 7.487 10.392 3.907 12.992 5.277 8.782 1.697 6.182 6.117 6.182 7.487 1.992 8.857 6.182 13.277 6.182Z"></path></svg></label>
  <span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span><span style="display: none;"></span></div>
    Login or Signup to reply.
  2. 0

    Have you tried the :has operator? Is kinda new but allows for this kind of selections. It allows you to select each element with a certain characteristic, in your case, all stars having a later sibling with :hover.
    This code should make the trick

        label:has(~:hover)>svg,
    label:hover>svg{
       fill: #000;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search