JSFiddle - React, Tailwind, and code Playground

by Givi Kesanashvili

HTML

<div>
    <img alt="rating1" id="rating1" src="" />
    <img alt="rating2" id="rating2" src="" />
    <img alt="rating3" id="rating3" src="" />
    <img alt="rating4" id="rating4" src="" />
    <img alt="rating5" id="rating5" src="" />
</div>

JavaScript

var parent = document.getElementById("rating1").parentNode;

parent.addEventListener("mouseover", changeimg_color, false);
parent.addEventListener("mouseout", changeimg_bw, false);

function changeimg_bw(e) {
    if (e.target.nodeName.toLowerCase() === "img") {
        //e.target.src = 'rating_bw.png';
        e.target.style.backgroundColor = "yellow";
        e.stopPropagation();
        e.preventDefault();
    }
}

function changeimg_color(e) {
    if (e.target.nodeName.toLowerCase() === "img") {
        //e.target.src = 'rating_color.png';
        e.target.style.backgroundColor = "red";
        e.stopPropagation();
        e.preventDefault();
    }
}