Javascript/HTML - 在鼠标悬停和鼠标移出时隐藏和显示图像

Question

我有一个功能，当您将鼠标移到其中一个下拉菜单上时，它会删除说明图像，当您在三秒钟后移开鼠标时，它会重新显示图像。我使用 onmouseover 和 onmouseout 来检测您何时将鼠标移开和移到菜单项上。这是实现此目的的 javascript 代码。

<script type="text/javascript">
function show(){
      document.getElementById("instru").style.display = ''
}
function hide() {
      document.getElementById("instru").style.display = 'none';
}
</script>

下面是用于制作带有 onmouseover 和 onmouseout 函数的菜单的代码。

<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#" onmouseover="hide()" onmouseout="setInterval(function(){show()},3000)")">1-5</a>
<ul>
  <li><a href="#" data-lightbox="" onmouseover="hide()" onmouseout="setInterval(function(){show()},3000)">1</a></li>
  <li><a href="#" data-lightbox="" onmouseover="hide()" onmouseout="setInterval(function(){show()},3000)">2</a></li>
  <li><a href="#" data-lightbox="" onmouseover="hide()" onmouseout="setInterval(function(){show()},3000)">3</a></li>
  <li><a href="#" data-lightbox="" onmouseover="hide()" onmouseout="setInterval(function(){show()},3000)">4</a></li>
  <li><a href="#" data-lightbox="" onmouseover="hide()" onmouseout="setInterval(function(){show()},3000)">5</a></li>
</ul>

我唯一的问题是，当您在菜单或子菜单项上移动鼠标前几次时，它会隐藏然后重新显示图像。然后什么都没有发生。我不确定为什么会这样。

我已经看过其他问题但没有运气。我检查了 w3school.com 以确保我做的一切都是正确的。我也做了一些谷歌搜索，但没有成功。我使用 Dreamweaver 设置页面，但使用 notepad++ 完成其余工作，遇到此错误后，我检查了 Dreamweaver 中的语法，没有遇到任何错误。

如果您想查看完整代码，我将不胜感激，我无法发布网站链接。

总结一下我的问题。我有一个带有菜单的页面，当单击菜单项或子菜单项时，它会隐藏说明图片，当您移开鼠标时，它会重新显示。我的问题是它只能工作几次，然后您必须重新加载页面才能再次工作。

Answer 1

您必须解决脚本中的两个问题:

1- 当您将鼠标从一个子菜单移动到另一个子菜单时，您的鼠标移出第一个子菜单并将鼠标悬停在第二个子菜单上，这将编程为在 3 秒内调用显示功能并立即执行隐藏功能。因此，当您鼠标移出任何子菜单项时，每 3 秒显示一次功能。想象一下，当您将鼠标悬停在子菜单上 100 次时!修复将是:

• 使用 setTimeout(一次执行)而不是 setInterval
• 将您的超时存储在一个变量中以便稍后清除

2-清除setTimeout返回的超时

function hide() {
      clearTimeout(timeout);
      document.getElementById("instru").style.display = 'none';
}

HTML 代码

<ul id="MenuBar1" class="MenuBarHorizontal">
  <li><a class="MenuBarItemSubmenu" href="#" onmouseover="hide()" 
               onmouseout="timeout = setTimeout(function(){show()},3000)">1-5</a>
<ul>
  <li><a href="#" data-lightbox="" onmouseover="hide()" onmouseout="timeout = setTimeout(function(){show()},3000)">1</a></li>
....
</ul>

更新

一个有效的 fiddle 示例 here .

希望对您有所帮助。