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

Question

我做了两个按钮

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

我想要的是，当我悬停在"；否"；按钮，按钮交换，好吧，不是按钮，文本交换。

我可以用onclick事件来做这件事，但并没有"onhover"这样的东西。我想让你向我展示如何只使用HTML、CSS和Vanilla JavaScript来实现这一点。

Answer 1

使用委派，我们可以将每个按钮切换为一个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仅用于演示目的，而不是答案的一部分

Answer 2

您可以使用1个简单的Javascript函数

参考我的代码了解更多

function switcher(){
var y = document.getElementsByClassName("wow");
for (i = 0; i < y.length; i++) {
if(y[i].innerHTML=="True")
y[i].innerHTML="False";
else
y[i].innerHTML="True";
}
}

<div class="container">
<button class="wow" onmouseover="switcher()"  onmouseout="switcher()">True</button><br><br>
<button class="wow" onmouseover="switcher()"  onmouseout="switcher()">False</button>
<div>