In this scenario, the team_hover() function is triggered by an onmouseover event, and the team_hover_bbye() function is triggered by an onmouseout event. While team_hover() works as expected, the display property of gl2 does not change to "none" when I move my mouse away from the element.
My goal is to reset the display property of gl2 back to "none" when the mouse is removed.
(Please note that this is my first post)
function team_hover() {
var a = document.getElementById("gl1");
var b = document.getElementById("gl2");
var myVar = setInterval(opac, 20);
var i = 0;
function opac() {
i = i + 0.1;
a.style.opacity = 1 - i;
if (i >= 1) {
a.style.display = "none";
b.style.display = "block";
} else {}
}
}
function team_hover_bbye() {
var i = document.getElementById("gl1");
var j = document.getElementById("gl2");
i.style.opacity = 1;
i.style.display = "block";
j.style.display = "none";
}
team_hover_bbye();#gl1, #gl2 { display: inline-block; width: 2em; height: 2em; margin: 0.5em; }
#gl1 { background: #F00; }
#gl2 { background: #0F0; }<div id="gl1" onmouseover="team_hover()"></div>
<div id="gl2" onmouseover="team_hover()"></div>