JSFiddle - React, Tailwind, and code Playground
HTML
<div id="overV12" class="menuItem" onclick="scrollToT('#overons')" onmouseover="setHover('overV12')" onmouseout="setOldClass('overV12')"><div class="menuInner">Over V12</div></div>
CSS
div.menuItem
{
height: 5.38%;
width: 7.44%;
position: fixed;
background-color: rgb(239, 239, 239);
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
}
div.menuItemHover
{
height: 5.38%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: rgb(211, 211, 211);
}
div.menuItemActive
{
height: 7.8%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: Black;
color: White;
}
JavaScript
function setActive(target) {
var div = $("#" + target);
if (div.attr("class") != "" && div.attr("class") != undefined) {
document.getElementById(target).setAttribute('oldClass', div.attr("class"));
div.removeClass(div.attr("class"));
}
div.addClass("menuItemActive");
}
function setOldClass(target) {
var div = $("#" + target);
if (div.attr("class") != "menuItemActive") {
if (div.attr("oldClass") != "" && div.attr("oldClass") != undefined) {
document.getElementById(target).setAttribute('class', div.attr("oldClass"));
document.getElementById(target).removeAttribute('oldClass');
} else {
document.getElementById(target).setAttribute('class', "menuItem");
}
}
}
function setHover(target) {
var div = $("#" + target);
if (div.attr("class") != "menuItemActive") {
if (div.attr("class") != "" && div.attr("class") != undefined) {
document.getElementById(target).setAttribute('oldClass', div.attr("class"));
div.removeClass(div.attr("class"));
}
div.addClass("menuItemHover");
}
}
function setNormal(target) {
var div = $("#" + target);
document.getElementById(target).setAttribute('class', "menuItem");
document.getElementById(target).removeAttribute('oldClass');
}