Hi folks,
Here’s my scenario, I have enabled some features to cause the display screen to change from blue to black when the “online”, “offline”, and “All” are moused over or clicked, and then change from black back to blue on mouseout
. However, because after you click anyone of the buttons, information is left on the screen, so on mouseout
, the screen is blue, and left with the information displayed on there. But, because I want the blue screen to function only as a video screen, I don’t want any information to display on the screen when it is blue aka video-state. I’d appreciate it if someone could help me achieve this! Thanks so much in advance!
Here is my Code Pen: https://codepen.io/IDCoder/pen/mXMqGV?editors=0010
Here is my current code that enables display to change colores upon mouseover
and mouseout
:
`
//…change video screen to tv state…
//for “Online” button
var tvStuff = document.querySelector(".online-status");
tvStuff.addEventListener(“mouseover”, function(){
$(".displayOutPutHere").addClass(“on”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".displayOutPutHere").removeClass(“on”);
});
tvStuff.addEventListener(“mouseover”, function(){
$(".TV-screen").addClass(“on2”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".TV-screen").removeClass(“on2”);
});
//for “Offline” button
var tvStuff = document.querySelector(".offline-status");
tvStuff.addEventListener(“mouseover”, function(){
$(".displayOutPutHere").addClass(“on”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".displayOutPutHere").removeClass(“on”);
});
tvStuff.addEventListener(“mouseover”, function(){
$(".TV-screen").addClass(“on2”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".TV-screen").removeClass(“on2”);
});
//for “All” button
var tvStuff = document.querySelector(".online-and-offline");
tvStuff.addEventListener(“mouseover”, function(){
$(".displayOutPutHere").addClass(“on”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".displayOutPutHere").removeClass(“on”);
});
tvStuff.addEventListener(“mouseover”, function(){
$(".TV-screen").addClass(“on2”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".TV-screen").removeClass(“on2”);
});
// for “searchbox field”
var tvStuff = document.querySelector(".searchbox");
tvStuff.addEventListener(“mouseover”, function(){
$(".displayOutPutHere").addClass(“on”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".displayOutPutHere").removeClass(“on”);
});
tvStuff.addEventListener(“mouseover”, function(){
$(".TV-screen").addClass(“on2”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".TV-screen").removeClass(“on2”);
});
`