时间戳

首页 > 解决方案 > 通过将鼠标悬停在其中一个按钮上来交换两个按钮的标签？

javascript - 通过将鼠标悬停在其中一个按钮上来交换两个按钮的标签？

问题描述

我做了两个按钮

<div class="container">
  <button>YES</button>
  <button>NO</button>
<div>

我想要的是，当我将鼠标悬停在“否”按钮上时，按钮交换，不是按钮，而是文本交换。

我可以用 onclick 事件做到这一点，但没有“onhover”之类的东西。我希望你向我展示你是如何只使用 HTML、CSS 和 Vanilla JavaScript 来做到这一点的。

标签： javascripthtmlcss

解决方案

使用委托，我们可以在一个 forEach 中切换每个按钮 - 注意我使用 [...] 扩展符号来允许较旧版本的较新浏览器也可以工作（Edge 16 我在看你）：

const switchName = e => {
  const tgt = e.target;
  if (tgt.tagName !== "BUTTON") return; // ONLY switch when you touch a button
  [...e.currentTarget.querySelectorAll("button")]
  .forEach(but => but.textContent = but.textContent === "True" ? "False" : "True");
};
document.querySelector(".container").addEventListener("mouseover", switchName)
document.querySelector(".container").addEventListener("mouseout", switchName)
div.container {
  padding: 15px;
  background-color: teal;
  width: 200px;
  text-align: center;
}

.container button {
  margin: 10px;
}
<div class="container">
  <button>True</button>
  <button>False</button>
</div>

CSS仅用于演示目的，不是答案的一部分

推荐阅读