如何使用鼠标悬停显示内容

Question

我正在为 wordpress 网站创建一个大型菜单。 在悬停时，我希望它根据您悬停的项目显示某些内容。

我已经设法编写了一些代码来实现悬停效果，但是由于 onmouseout 功能，内容在可点击之前就消失了

这是我的代码示例

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
var y = document.getElementById("support");
  if (y.style.display === "block") {
    y.style.display = "none";
  } else {
    y.style.display = "none";
  }
}

function customerSupport() {
  var x = document.getElementById("support");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
var y = document.getElementById("myDIV");
  if (y.style.display === "block") {
    y.style.display = "none";
  } else {
    y.style.display = "none";
  }
}

<button onmouseover="myFunction()" onmouseout="document.getElementById('myDIV').style.display = 'none';">Try it</button>
<button onmouseover="customerSupport()" onmouseout="document.getElementById('support').style.display = 'none';">Customer Support</button>

<div id="support" style="display:none">
Hello World
</div>
<div id="myDIV" style="display:none">
<button>Try it now!</button>
</div>

有没有办法让我点击显示的内容而不消失？

Answer 1

您可以编辑您的 HTML，以便“立即尝试！”内容保留在 mouseover/mouseleave 函数的容器中，如下所示：

<div onmouseover="myFunction()" onmouseout="document.getElementById('myDIV').style.display = 'none';">
 <button>Try it</button>
 <div id="myDIV" style="display:none">
  <button>Try it now!</button>
 </div>
</div>

在这里工作 JSfiddle：https://jsfiddle.net/59L06jtu/