Mouseover/Mouseout State Doesn't Remain As Default

Hi folks,

I’m trying to create the following outcome:

When I hover over and/or click on any of my buttons entitled, “Online”, "Offline, and “All” I want my information display screen to change to black, and when I mouseout off the buttons, the screen will change back to its original blue. I got this to work.

Now the only thing is that, once the page is refreshed/relaunched, the display screen is black by default, when it should be the original blue instead. It is only supposed to change to black for the mouseover/mouseout function. I don’t know what is causing this! Do you know why this is? I’d really appreciate your help! Thanks in advance! Cheers! Code Pen link here: https://codepen.io/IDCoder/pen/mXMqGV
`
//…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”);
});
`

See Code Pen link here: https://codepen.io/IDCoder/pen/mXMqGV?editors=0010

Hi,

<div class="displayOutPutHere on">

I think that the on class hardcoded here seems to be the problem

@alhazen1, oh ok! How so? What is it doing? How can I keep the “On” class there and solve the problem?

If removing the on from the html section solves the problem, why do you still want it there? Does it serve some other purpose?

@RandellDawson, yes it serves a purpose there. It enables the “On” CSS rule to enable the display screen to mouseover to black and mouseout to blue…that’s why it’s there.

Unless I am missing something, removing on still allows the mouseover to work as you are wanting.

Damn, you right @RandellDawson…slams head on table!:persevere::persevere::laughing::laughing::hushed::hushed::thinking::neutral_face: