如何通过单击并悬停在不同 div 的元素上来更改另一个 div 的元素答案

【问题标题】：How to change the element of another div by clicking and hovering on an element of a different div如何通过单击并悬停在不同 div 的元素上来更改另一个 div 的元素
【发布时间】：2018-08-17 14:19:56
【问题描述】：

<html>
<body>
<div A>
<button id="head">Head</button>
<button id="head">Neck</button>
<button id="head">Shoulder</button>
<button id="head">Back</button>
</div>
<div B>
<img id ="head" src="head.png"></img>
<img id ="neck" src="neck.png"></img>
<img id ="shoulder" src="shoulder.png"></img>
<img id ="back" src="back.png"></img>
</div>
</body>
</html>

我想隐藏 div B 的元素.. 两个 div 上有多个项目因此，例如，我单击带有标签头的按钮，只会出现头部的图像，而身体的其他部位将不可见。身体其他部位也一样

【问题讨论】：

请在提问前做一些研究，w3school.com 上有很多例子可以解决你的问题。
很多方法都取决于你的 html 标记
您能否展示您所做的工作，建议您向我们展示您编写的一些代码，以便我们为您提供帮助。
div A 中有哪些元素，div B 中有哪些元素？有哪些关系？你仅限于 CSS 吗？ Javascript是一种选择吗？ jQuery 怎么样？请在您的问题中更加具体，并提供您的标记示例以及您迄今为止的最佳尝试。

标签： jquery html css

【解决方案1】：

正如人们所说，有很多方法可以做到这一点。一种方法是使用 JavaScript 事件侦听器。这是一个快速的小演示：

let change = document.getElementById("change");
let hover = document.getElementById("hover");

hover.addEventListener("mouseover", changeColor);
hover.addEventListener("mouseout", changeColor);

function changeColor() {
  change.classList.toggle("red");
}

div {
  width: 100px;
  height: 100px;
  margin: 2rem;
  background-color: green;
}

.red {
  background-color: red;
}

<div id="change">
  Change Me
</div>

<div id="hover">
  Hover Me
</div>

祝你好运！如果您还不熟悉事件侦听器，我绝对建议您阅读它们。

【讨论】：