怎样用js实现鼠标悬停一个div让另一个div用指定的样式

Question

怎样用js实现鼠标悬停一个div让另一个div用指定的样式

drtgsrdfdsfsdfdsf

Answer 1

努力の小熊结合ChatGPT4.0的回答：
要使用 JavaScript (JS) 在鼠标悬停在一个 div 上时改变另一个 div 的样式，你可以使用以下步骤：

①在 HTML 中设置两个 div，并分别分配一个唯一的 ID。

<div id="hoverDiv">Hover over me</div>
<div id="targetDiv">Change my style</div>

②创建一个 CSS 样式，用于在鼠标悬停时应用到目标 div。

<style>
  .hoveredStyle {
    /* 在此处添加你想要的样式 */
    background-color: yellow;
    color: red;
  }
</style>

③使用 JavaScript 为第一个 div 添加 mouseover 和 mouseout 事件监听器，以改变第二个 div 的样式。

<script>
  // 获取两个 div 元素
  const hoverDiv = document.getElementById("hoverDiv");
  const targetDiv = document.getElementById("targetDiv");

  // 为第一个 div 添加鼠标悬停事件监听器
  hoverDiv.addEventListener("mouseover", () => {
    targetDiv.classList.add("hoveredStyle");
  });

  // 为第一个 div 添加鼠标移出事件监听器
  hoverDiv.addEventListener("mouseout", () => {
    targetDiv.classList.remove("hoveredStyle");
  });
</script>

现在，当你将鼠标悬停在 "hoverDiv" 上时，"targetDiv" 将应用名为 "hoveredStyle" 的 CSS 类。当鼠标移出 "hoverDiv" 时，将删除 "hoveredStyle" 类。这样，你就可以实现鼠标悬停一个 div 时改变另一个 div 的样式。