Welcome aboard! We are happy you are here and wish you good net-raft!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html
{
width: 100%;
height: 100%;
overflow: hidden;
background: #383838;
}
#rating
{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
width: 30%;
height: 30%;
}
#rating span
{
cursor: pointer;
font-size: 50px;
padding: 0 10px;
color: #fff;
opacity: .5;
transition: all 150ms;
display: inline-block;
transform: rotateX(45deg);
transform-origin: center bottom;
}
#rating span.hover
{
color: #ff0;
opacity: 1;
transform: rotateX(0deg);
text-shadow: 0 0 10px #ffc;
}
#rating span.selected
{
color: #ff0;
opacity: 1;
transform: rotateX(0deg);
text-shadow: 0 0 30px #ffc;
}
</style>
</head>
<body>
<div id="rating">
<span class="selected" data-count='1' title='Poor'>★</span>
<span data-count='2' title='Fair'>★</span>
<span data-count='3' title='Good'>★</span>
<span data-count='4' title='Excellent'>★</span>
<span data-count='5' title='WOW!!!'>★</span>
</div>
<script>
document.getElementById('rating').onmouseover = function () {
let stars = document.querySelectorAll('#rating span');
for (let y = 0; y < stars.length; y++) {
stars[y].onmouseover = function () {
let onStar = this.getAttribute('data-count');
for (i = 0; i < stars.length; i++) {
stars[i].classList.remove('hover');
}
for (i = 0; i < onStar; i++) {
stars[i].classList.add('hover');
}
}
}
}
document.getElementById('rating').onmouseout = function () {
let stars = document.querySelectorAll('#rating span');
for (let y = 0; y < stars.length; y++) {
stars[y].onmouseout = function () {
let onStar = this.getAttribute('data-count');
for (i = 0; i < stars.length; i++) {
stars[i].classList.remove('hover');
}
}
}
}
document.getElementById('rating').onclick = function () {
let stars = document.querySelectorAll('#rating span');
for (let y = 0; y < stars.length; y++) {
stars[y].onclick = function () {
let onStar = this.getAttribute('data-count');
for (i = 0; i < stars.length; i++) {
stars[i].classList.remove('selected');
}
for (i = 0; i < onStar; i++) {
stars[i].classList.add('selected');
}
}
}
}
</script>
</body>
</html>
The most helpful JAVASCRIPT solutions
How can I get the last day and the next day in javascript ?JAVASCRIPT Click to see more ... 5.8K 507