html javascript 在鼠标悬停时展开<details>，在鼠标移开时折叠

Question

<details>

HTML 元素默认折叠并在鼠标单击时展开。我正在尝试覆盖默认行为，以便它将在

mouseover

上展开并在

mouseout

上折叠。

我只想在鼠标离开内部细节和摘要时折叠。如何实现？

window.addEventListener("load", () => {
  const details = document.body.querySelectorAll("details");
  for (const detail of details) {
    detail.addEventListener("mouseover", (evt) => {
      console.log(evt.target.parentElement.setAttribute("open", true));
    });
    detail.addEventListener("mouseout", (evt) => {
      console.log(evt.target.parentElement.removeAttribute("open"));
    });
  }
});

<details>
  <summary>summary</summary>
  internal details
</details>

Answer 1

使用

mouseenter

和

mouseleave

事件代替

mouseover

和

mouseout

。后来的事件冒泡，所以当你

mouseout

<summary>

时，事件监听器触发，但实际上，你只希望事件监听器在鼠标上触发而离开

<details>

本身。

window.addEventListener("load", () => {
  const details = document.body.querySelectorAll("details");
  for (const detail of details) {
    detail.addEventListener("mouseenter", (evt) => {
      console.log(evt.target.setAttribute("open", true));
    });
    detail.addEventListener("mouseleave", (evt) => {
      console.log(evt.target.removeAttribute("open"));
    });
  }
});

<details>
  <summary>summary</summary>
  internal details
</details>

Answer 2

或者，您可以用

标签包裹“内部细节”，它应该可以工作，无需更改原始脚本。

<details style="border: 1px solid red">
  <summary>summary</summary>
  <div>
    internal details
  </div>
</details>