CSS Star Rating System Hover

Question

I'm developing a Java map using a leaflet and I'm creating marker popups on the map. On these popups, I would like to have a star rating system that on hover highlights all stars beforehand, and on click, the stars stay filled. Currently, I can make them remain filled on click but only highlight one at a time with hover.

This is my CSS for the stars currently:

/*set the default color of the stars*/
.star-rating{
    color: #bebebe;
    font-size:2em;
}
/*create the star*/
.my-star:before{
    content:"\002605";
}
/*remove the default style (italic) of the star*/
.my-star{
    font-style: unset !important;
    width: px;
}
/*set active star color*/
.is-active{
    color:#fb8900;
}
/*set color on hover*/
.my-star:hover{
    color: #fb8900;
}

This is my Javascript code for making an individual star element (this is repeated 5 times with the numbers being incremented).

var popupStar1 = document.createElement("i");
popupStar1.className ="my-star star-1";
popupStar1.setAttribute("data-star", "1");

This is then appended to a 'p' element, which is then appended to the marker 'div' element:

var popupRating = document.createElement("p");
popupRating.className ="star-rating";
popupRating.append(popupStar1);
popupRating.append(popupStar2);
popupRating.append(popupStar3);
popupRating.append(popupStar4);
popupRating.append(popupStar5);

popupDiv.append(popupRating);

This is the resulting HTML:

<p class="star-rating">
  <i class="my-star star-1" data-star="1"></i>
  <i class="my-star star-2" data-star="2"></i>
  <i class="my-star star-3" data-star="3"></i>
  <i class="my-star star-4" data-star="4"></i>
  <i class="my-star star-5" data-star="5"></i>
</p>

Does this answer your question? [Is there a "previous sibling" selector?](https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector) — Axekan, Sep 26 '22 at 13:05

Arnau · Answer 1 · 2022-09-27T07:36:47.220

Older answer:

Try

.star-rating:hover .my-star{
   /* here goes the styling you want for all the stars */
   color: #fb8900;
}

New answer:

There is not selector for previous elements, but we can do a trick like this:

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}

.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

Explanation: Something similar has actually been answered in Is there a "previous sibling" selector?

The basic idea is:

elements have a specific design (in this example blue color)
when parent is hovered we change the style of all children (in this example to red)
at the same time we detect the hovering of a specific children and we override the style (again blue color) to the siblings, using the ~ selector.

This highlights all stars, I was hoping for something along the lines of this. If I hover over star three only the 1st 2nd and 3rd star will be highlighted. — Raith Fullam, Sep 26 '22 at 13:07

CSS Star Rating System Hover

1 Answers1