[英]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.