Advertisements
I have js script for rating from one to five smileys. But it select hovered smileys in wrong way. If from right to left, but I want it from left to right.
I wanted to create a script that after clicking on a smiley will mark in green that smiley and all the previous ones. After leaving the mouse, it will turn the color back to black. If the smiley is clicked it will permanently mark that smiley and all the previous ones green.
Can you help me? Thanks
const emojis = document.querySelectorAll('.emoji');
emojis.forEach((emoji) => {
emoji.addEventListener('mouseenter', () => {
// highlight the current and previous emojis
const current = parseInt(emoji.getAttribute('data-value'));
console.log(current);
for (let i = emojis.length; i > 0; i--) {
if (i <= current) {
document
.querySelector(`[data-value="${i}"] svg path`)
.setAttribute('fill', 'green');
} else {
document
.querySelector(`[data-value="${i}"] svg path`)
.setAttribute('fill', 'black');
}
}
});
emoji.addEventListener('mouseleave', () => {
// restore the default color of the current and previous emojis
const current = parseInt(emoji.getAttribute('data-value'));
emojis.forEach((e) => {
const value = parseInt(e.getAttribute('data-value'));
if (e.classList.contains('selected')) {
e.querySelector('svg path').setAttribute('fill', 'green');
} else if (value <= current) {
e.querySelector('svg path').setAttribute('fill', 'black');
}
});
});
emoji.addEventListener('click', () => {
// select the current emoji and update the previous ones
const current = parseInt(emoji.getAttribute('data-value'));
emojis.forEach((e) => {
const value = parseInt(e.getAttribute('data-value'));
if (value <= current) {
e.classList.add('selected');
e.querySelector('svg path').setAttribute('fill', 'green');
} else {
e.classList.remove('selected');
e.querySelector('svg path').setAttribute('fill', 'black');
}
});
});
});.rating {
display: flex;
justify-content: center;
align-items: center;
}
.rating .emoji {
cursor: pointer;
margin: 5px;
}
.rating .emoji svg path {
fill: black;
}
.rating .emoji.selected svg path,
.rating .emoji:hover svg path,
.rating .emoji:hover ~ .emoji svg path {
fill: green;
}<div class="column">
<div class="rating">
<span class="emoji" data-value="1">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="black"
/>
</svg>
</span>
<span class="emoji" data-value="2">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="black"
/>
</svg>
</span>
<span class="emoji" data-value="3">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="black"
/>
</svg>
</span>
<span class="emoji" data-value="4">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="black"
/>
</svg>
</span>
<span class="emoji" data-value="5">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="black"
/>
</svg>
</span>
</div>
</div>>Solution :
I would recommend using an inverse matching to achieve the effect.
In CSS3, there’s no parent sibling selector. However, you can add a default :hover selector to the parent component (in this case .rating). After that, with the combination of general sibling combinator, you can make the elements after the element that is being hovered back to the original state.
Sample below:
.column {
display: flex;
justify-content: center;
align-items: center;
}
.rating .emoji {
cursor: pointer;
padding: 5px;
color: black;
}
.rating:hover .emoji {
color: green;
}
.rating .emoji:hover ~ .emoji {
color: black;
}<div class="column">
<div class="rating">
<span class="emoji" data-value="1">
<!-- use the desired SVG icon instead of the text content -->
<svg
width="45"
height="45"
viewBox="0 0 45 45"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="currentColor"
/>
</svg>
</span>
<span class="emoji" data-value="2">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="currentColor"
/>
</svg>
</span>
<span class="emoji" data-value="3">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="currentColor"
/>
</svg>
</span>
<span class="emoji" data-value="4">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="currentColor"
/>
</svg>
</span>
<span class="emoji" data-value="5">
<svg
width="45"
height="45"
viewBox="0 0 45 45"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 3.75C32.8387 3.75 41.25 12.1613 41.25 22.5C41.25 32.8387 32.8387 41.25 22.5 41.25C12.1613 41.25 3.75 32.8387 3.75 22.5C3.75 12.1613 12.1613 3.75 22.5 3.75ZM22.5 0C10.0744 0 0 10.0744 0 22.5C0 34.9256 10.0744 45 22.5 45C34.9256 45 45 34.9256 45 22.5C45 10.0744 34.9256 0 22.5 0ZM33.75 26.25H11.25C11.8706 28.9969 16.5506 33.75 22.5019 33.75C28.3781 33.75 33.1256 29.0231 33.75 26.25ZM15.9375 15C14.385 15 13.125 16.2581 13.125 17.8125C13.125 19.3669 14.385 20.625 15.9375 20.625C17.49 20.625 18.75 19.3669 18.75 17.8125C18.75 16.2581 17.49 15 15.9375 15ZM29.0625 15C27.51 15 26.25 16.2581 26.25 17.8125C26.25 19.3669 27.51 20.625 29.0625 20.625C30.615 20.625 31.875 19.3669 31.875 17.8125C31.875 16.2581 30.615 15 29.0625 15Z"
fill="currentColor"
/>
</svg>
</span>
</div>
</div>