Hovering over the Star Rating component will cause all previous stars to be filled

Question

Hovering over the Star Rating component will cause all previous stars to be filled

I'm in the process of creating a Star Rating component for our website using Angular 11. I've managed to render the 5 stars based on the current rating value, but I'm having trouble getting the hover styling just right.

Basically, if I have a rating of 2 out of 5 stars and I hover over the 4th star, the 3rd star should be filled as well. I can't seem to figure out the correct CSS for this specific effect.

.rating-icon-empty { fill: #9e9e9e }
.rating-icon { fill: #7C4DFF; margin-right: 5px; }
.editable .rating-icon-empty:hover { fill: #7C4DFF; cursor: pointer;}

My current CSS only fills the star that is being hovered over, without filling the previous empty stars. Is there a way to achieve this using pure CSS, or do I need to use hover listeners for each individual star?

html css angular

Answer 1

Answer №1

I encountered a similar issue in the past, check out these suggestions:

Primary Solution:

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  }

<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>

Source:

https://codepen.io/jamesbarnett/pen/vlpkh

Alternative Solution:

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
}

.rating>span {
    display: inline-block;
    position: relative;
    width: 1.1em;
}

.rating>span:hover:before,
.rating>span:hover~span:before {
    content: "\2605";
    position: absolute;
}

<body>
    <div class="rating">
        <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
    </div>
</body>

Source:

https://css-tricks.com/star-ratings/

If you encounter any issues, feel free to reach out.

Answer 2

I encountered a similar issue in the past, check out these suggestions:

Primary Solution:

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

fieldset, label { margin: 0; padding: 0; }
body{ margin: 20px; }
h1 { font-size: 1.5em; margin: 10px; }

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  }

<h1>Pure CSS Star Rating Widget</h1>
<fieldset class="rating">
    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>

Source:

https://codepen.io/jamesbarnett/pen/vlpkh

Alternative Solution:

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.rating {
    unicode-bidi: bidi-override;
    direction: rtl;
}

.rating>span {
    display: inline-block;
    position: relative;
    width: 1.1em;
}

.rating>span:hover:before,
.rating>span:hover~span:before {
    content: "\2605";
    position: absolute;
}

<body>
    <div class="rating">
        <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
    </div>
</body>

Source:

https://css-tricks.com/star-ratings/

If you encounter any issues, feel free to reach out.

Hovering over the Star Rating component will cause all previous stars to be filled

Answer №1

Primary Solution:

Alternative Solution:

Similar questions

Enforce a restriction on the user's input value for the amount field within a React application

The Google Books API has encountered an authentication error with status code 401

Switching the navbar image with HTML and JavaScript when clicked

Utilizing combined selectors in styled-components: A comprehensive guide

Issue with Safari: Unable to trigger CSS :hover when tapping SVG element

Implement a dynamic table in real-time with jQuery AJAX by fetching data from JSON or HTML files

Mobile viewing causing problems with website buttons functionality

Refreshing the information in the database table

What is the best way to create more room for my button arrangement?

Tips for adjusting the color of multiple classes that have a common class using a toggle feature

Elements featured in the header: logo, tagline, graphics, and more

Encountering difficulties while trying to install ng2-material in Angular 2

The innerHTML inside Angular components appears scrambled, with only the final innerHTML rendering correctly

Introducing a fresh input field that includes a dropdown selection feature

Attempting to divide the main page into quadrants

Unable to extract all elements using simple HTML dom when parsing RSS feed

Creating a clickable button within an image container using Bootstrap 5

Display current weather conditions with the Open Weather API (featuring weather icons)

Try utilizing MutationObserver to monitor changes in various nodes

The integration between React hook form and reactstrap input components is not functioning properly