I have a styling issue I can't solve. I've got a simple toggle with two options -- the user can either click on Toggle1
or Toggle2
, and the page will update dynamically with different data depending on which toggle is active:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="toggle1">Toggle 1</div>
<div id="toggle2">Toggle 2</div>
</body>
</html>
When a toggle is selected/active, it should have a blue background. When a toggle is NOT selected, it should have a white background orange background on hover. On page load, toggle1
is selected by default.
This all works perfectly on initial page load -- toggle1 is selected and blue, and toggle2 is white with orange hover. When I click on toggle2, it turns blue, and toggle1 goes back to white.
However, after I've clicked between the toggles, the orange hover effect stops working. I can't figure out why this would be. Is it because the elements are being registered as "active" after they've been clicked or something? I can't figure it out.
I've tried using both css and jQuery to attach the hover effect:
CSS:
#toggle1:hover, #toggle2:hover {
background: lightblue;
}
jQuery:
$(toggle1).hover(
function () {
$(this).addClass("blue");
},
function () {
$(this).removeClass("blue");
}
);
$(toggle2).hover(
function () {
$(this).addClass("blue");
},
function () {
$(this).removeClass("blue");
}
);
They are both successful in adding the hover effect on page load, but not after a toggle has been clicked. Hover stops working entirely.
As far as the onClick function, that's in Javascript:
JS:
const showToggle1 = () => {
// ...code to show toggle 1 content
// change background colors from blue to white
$(toggle2).css({ background: "#FFFFFF", color: "#000000" });
$(toggle1).css({ background: "#0074d9", color: "#FFFFFF" });
}
const showToggle2 = () => {
// code to show toggle 2 content
// change background colors from blue to white
$(toggle1).css({ background: "#FFFFFF", color: "#000000" });
$(toggle2).css({ background: "#0074d9", color: "#FFFFFF" });
}
All I can think is that there must be something that happens when the onClick functions run that interferes with the Hover, but I can't figure out what that would be.
CodePudding user response:
I couldn't figure out the cause of the output you are having, but all I can do is to suggest another method. Use the following html, css and js:
toggle1 = document.querySelector("#toggle1");
toggle2 = document.querySelector("#toggle2");
const showToggle1 = () => {
//Show the Toggle1 Content
toggle1.classList.add('selected');
toggle2.classList.remove('selected');
}
const showToggle2 = () => {
//Show the Toggle2 Content
toggle2.classList.add('selected');
toggle1.classList.remove('selected');
}
.toggle{
background: white;
color: black;
}
.toggle:hover{
color: orange;
}
.toggle.selected{
background: blue;
color: white;
}
.toggle.selected:hover{
color: white;
}
<div id="toggle1" onclick="showToggle1()">Toggle1</div>
<div id="toggle2" onclick="showToggle2()">Toggle2</div>
That's it! That should work.