JSFiddle - React, Tailwind, and code Playground

by Cameron Bernhardt

HTML

<a href="#" id="green">Green</a>
<a href="#" id="blue">Red</a>

<div class="blue-car"></div>
<div class="iColor"></div>

CSS

.blue-car {
    background-color: green;
    height: 50px;
    width: 50px;
}
.iColor {
    background-color: red;
    height: 50px;
    width: 50px;
}

JavaScript

document.getElementsByClassName("blue-car")[0].addEventListener("mouseenter", function(){
    document.getElementById("green").style.color = "green";
});

document.getElementsByClassName("iColor")[0].addEventListener("mouseenter", function(){
    document.getElementById("blue").style.color = "red";
});

document.getElementsByClassName("blue-car")[0].addEventListener("mouseout", function(){
    document.getElementById("green").style.color = "";
});

document.getElementsByClassName("iColor")[0].addEventListener("mouseout", function(){
    document.getElementById("blue").style.color = "";
});