[英]CSS Hover stops working after button has been clicked on once
我有一个我无法解决的样式问题。 我有一个带有两个选项的简单切换——用户可以点击Toggle1
或Toggle2
,页面将根据激活的切换使用不同的数据动态更新:
<!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>
选择/激活切换时,它应该有蓝色背景。 当未选择切换时,它应该在toggle1
上具有白色背景 + 橙色背景。在页面加载时,默认情况下选择切换 1。
这一切都在初始页面加载时完美运行——toggle1 被选中且为蓝色,toggle2 为白色和橙色 hover。当我单击 toggle2 时,它变为蓝色,toggle1 变回白色。
但是,在我点击切换开关后,橙色 hover 效果停止工作。 我不明白为什么会这样。 是因为元素在被点击后被注册为“活动”还是什么? 我想不通。
我试过同时使用 css 和 jQuery 附加 hover 效果:
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");
}
);
他们都成功地在页面加载上添加了 hover 效果,但在单击切换之后却没有。 Hover 完全停止工作。
至于 onClick function,那是在 Javascript 中:
记者:
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" });
}
我能想到的是,当 onClick 函数运行时一定会发生一些干扰 Hover 的事情,但我无法弄清楚那会是什么。
我无法弄清楚您所拥有的 output 的原因,但我所能做的就是建议另一种方法。 使用以下 html、css 和 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>
就是这样。 那应该有效。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.