screenshots.gif

html

<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>

<div id="container"></div>

js

const container = document.getElementById("container");

let loadedElement;

document.getElementById("btn1").addEventListener("mouseover", function() {
  if (loadedElement) {
    loadedElement.style.display = 'none';   
  }
  const elementToLoad = document.createElement("p");
  elementToLoad.textContent = "这是第一个元素";
  container.appendChild(elementToLoad);
  loadedElement = elementToLoad;
});

document.getElementById("btn2").addEventListener("mouseover", function() {
  if (loadedElement) {
    loadedElement.style.display = 'none';   
  }

  const elementToLoad = document.createElement("p");
  elementToLoad.textContent = "这是第二个元素";
  container.appendChild(elementToLoad);
  loadedElement = elementToLoad;
});

document.getElementById("btn3").addEventListener("mouseover", function() {
  if (loadedElement) {
    loadedElement.style.display = 'none';   
  }

  const elementToLoad = document.createElement("p");
  elementToLoad.textContent = "这是第三个元素";
  container.appendChild(elementToLoad);
  loadedElement = elementToLoad;
});