CSS Hover 在按钮被点击一次后停止工作

Question

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:我有一个带有两个选项的简单切换——用户可以点击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>

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.当未选择切换时，它应该在toggle1上具有白色背景 + 橙色背景。在页面加载时，默认情况下选择切换 1。

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.这一切都在初始页面加载时完美运行——toggle1 被选中且为蓝色，toggle2 为白色和橙色 hover。当我单击 toggle2 时，它变为蓝色，toggle1 变回白色。

However, after I've clicked between the toggles, the orange hover effect stops working .但是，在我点击切换开关后，橙色 hover 效果停止工作。 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 和 jQuery 附加 hover 效果：

CSS: CSS：

#toggle1:hover, #toggle2:hover {
  background: lightblue;
}

jQuery: 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 效果，但在单击切换之后却没有。 Hover stops working entirely. Hover 完全停止工作。

As far as the onClick function, that's in Javascript:至于 onClick function，那是在 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.我能想到的是，当 onClick 函数运行时一定会发生一些干扰 Hover 的事情，但我无法弄清楚那会是什么。

Answer 1

I couldn't figure out the cause of the output you are having, but all I can do is to suggest another method.我无法弄清楚您所拥有的 output 的原因，但我所能做的就是建议另一种方法。 Use the following html, css and js:使用以下 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>

That's it.就是这样。 That should work.那应该有效。

CSS Hover 在按钮被点击一次后停止工作

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-04-15 08:32:38

CSS Hover 在按钮被点击一次后停止工作

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-04-15 08:32:38

解决方案1
1 已采纳 2022-04-15 08:32:38