I am creating a Java map utilizing leaflet and I am creating marker popups on the map. On these popups I wish to have a star score system that on hover highlights all stars earlier than hand and on click on the celebs stayed stuffed. At the moment I could make them keep stuffed on click on however solely spotlight one after the other with hover.
That is my CSS for the celebs presently:
/*set the default coloration of the celebs*/
.star-rating{
coloration: #bebebe;
font-size:2em;
}
/*create the star*/
.my-star:earlier than{
content material:" 02605";
}
/*take away the default fashion (italic) of the star*/
.my-star{
font-style: unset !necessary;
width: px;
}
/*set lively star coloration*/
.is-active{
coloration:#fb8900;
}
/*set coloration on hover*/
.my-star:hover{
coloration: #fb8900;
}
That is my Javascript code for making a person star component (that is repeated 5 instances with the numbers being incremented).
var popupStar1 = doc.createElement("i");
popupStar1.className ="my-star star-1";
popupStar1.setAttribute("data-star", "1");
That is then appended to a ‘p’ component, which is then appended to the marker ‘div’ component:
var popupRating = doc.createElement("p");
popupRating.className ="star-rating";
popupRating.append(popupStar1);
popupRating.append(popupStar2);
popupRating.append(popupStar3);
popupRating.append(popupStar4);
popupRating.append(popupStar5);
popupDiv.append(popupRating);
Thanks