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秒内调用show函数并立即执行隐藏功能的鼠标。因此，当您删除任何子菜单项时，您的show功能每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>

<强>更新

一个工作小提琴示例here。

希望它有所帮助。

Javascript / HTML - 隐藏和显示onmouseover和onmouseout上的图像

1 个答案: