Friday, March 29, 2024
HomeCSSjavascript - CSS Star Ranking System Hover

javascript – CSS Star Ranking System Hover


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

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments