Question

<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上都有多个项目因此，例如，我单击带有标签头的按钮时，只会出现头的图像，而身体的其他部分将不可见。身体的其他部位也一样

Answer 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>

祝你好运！如果您还不熟悉事件监听器，我绝对会建议您继续阅读。

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

1 个答案: