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.
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" class="toggle selected" onclick="showToggle1()">Toggle1</div> <div id="toggle2" class="toggle" onclick="showToggle2()">Toggle2</div>
That's it. That should work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.