Javascript / HTML - 隐藏和显示图像onmouseover和onmouseout [英] Javascript/HTML - Hiding and showing images onmouseover and onmouseout

问题描述

我有一个功能，当您将鼠标移到其中一个下拉菜单上时，它将删除指令图像，并且当您在三秒钟后移除鼠标时，它会将图像备份。我使用 onmouseover 和 onmouseout 来检测何时将鼠标从菜单项上移开。这是使这种情况发生的JavaScript代码。

 < script type =text / javascript> 
 function show（）{
 document.getElementById（instru）。style.display =''
} 
 function hide（）{
 document.getElementById（ instru）。style.display ='none'; 
} 
< / script> 
  

以下是用于使用 onmouseover制作菜单的代码 $ b

 < ul id =MenuBar1class =MenuBarHorizo​​ntal> 
< li>< a class =MenuBarItemSubmenuhref =＃onmouseover =hide（）onm​​ouseout =setInterval（function（）{show（）}，3000））> 1 -5< / a> 
< ul> 
< li>< a href =＃data-lightbox =onmouseover =hide（）onm​​ouseout =setInterval ）{show（）}，3000）> 1< / a>< / li> 
< li>< a href =＃data- lightbox =onmouseover =hide < / li> 
< li>< a href =＃data-lightbox = onmouseover =hide（）onm​​ouseout =setInterval（function（）{show（）}，3000）> 3< / a>< / li> 
< li>< a href =＃data-lightbox =onmouseover =hide（）onm​​ouseout =setInterval（function（）{show（）}，3000）> 4< / a>< / li> 
 < li>< a href =＃data-lightbox =onmouseover =hide（）onm​​ouseout =setInterval（function（）{show（）}，3000）> 5< / a><< ; / li> 
< / ul> 
  

我唯一的问题是当你移动你的鼠标在菜单或子菜单项上，它会隐藏起来然后重新显示图像。之后没有任何反应。我不知道为什么会发生这种情况。

我没有看过其他问题。我已经检查了w3school.com，以确保我做的一切正确。我做了一些Google搜索，但都没有运气。我使用Dreamweaver来设置页面，但使用notepad ++来完成其余的工作，而当我遇到这个错误时，我在Dreamweaver中检查了我的语法并没有遇到任何错误。

如果您想查看整个代码，我不能发布链接到该网站，任何帮助将不胜感激。

总结我的问题。我有一个菜单页面，当菜单项或子菜单项被点击时，它会隐藏说明图片，当你删除鼠标时，它将重新显示它。我的问题是它只能使用几次，然后你必须重新加载页面才能重新工作。

必须在脚本中解决两个问题：



1-当您将鼠标从一个子菜单移动到另一个子菜单时，您将鼠标移到第一个子菜单上，然后鼠标滑过第二个子菜单在3秒内调用显示功能并立即执行隐藏功能。所以，当你弹出任何子菜单项时，你的显示功能每3秒钟一次。想象一下，当你将子菜单悬停100次！一个解决方法是：



• 使用setTimeout（一次执行）而不是setInterval


• 稍后清除一个变量
  
  
  清除setTimeout返回的超时值
  
  pre> function hide（）{
clearTimeout（timeout）;
document.getElementById（instru）。style.display ='none';
}


  HTML代码 b
  

   < ul id =MenuBar1class =MenuBarHorizo​​ntal> 
  < li>< a class =MenuBarItemSubmenuhref =＃onmouseover =hide（）
   onmouseout =timeout = setTimeout（function（）{show（）}，3000） > 1-5< / A> 
  < ul> 
  < li>< a href =＃data-lightbox =onmouseover =hide（）onm​​ouseout =timeout = setTimeout（function（）{show（）}， 1·; / A>< /锂> 
   .... 
  < / ul> 
    

  更新
  

  一个工作小提琴示例此处。

  
  
  

  希望它有帮助。

  
  

  I have a Function that when you move your mouse over one of the drop down menus it then removes the instruction image and when you remove your mouse after three seconds it then puts the image back up. I use onmouseover and onmouseout to detect when you move you mouse off and on the menu items. Here's the javascript code that makes this happen.

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

  and here is the code that is used to make a menu with the onmouseover and onmouseout functions.

  <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>
  

My only problem is when you move your mouse on the menu or submenu items the first couple of times it will hide and then re-display the image. Then after that nothing happens. I'm not sure why this happening.

I have looked on other questions with no luck. I have checked w3school.com to make sure i was doing everything correctly. I've done some Google searches with no luck either. I used Dreamweaver to set up the page but have use notepad++ to do the rest and after i ran into this error i checked my syntax in Dreamweaver and didn't run into any errors.

Any help would be appreciated if you would like to see the whole code I cant post a link to the website.

To summarize my question. I have a page with a menu that when the menu item or submenu item is clicked it will hide the instructions picture and when you remove your mouse it will re-display it. My problem is it only works a couple of times and then you have to reload the page for it to work again.

解决方案

You have to fix two issues in your script :

1- When you move your mouse from a submenu to another submenu your mouseouting the first one and mouseovering the second one which will program to call the show function in 3 seconds and execute the hide function now. So, your show function every 3 seconds when you mouseout any submenu item. Imagine when you hover the submenus 100 times! A fix will be :

• Use setTimeout (once execution) instead of setInterval
• Store your timeout in a variable to clear later

2- clear the timeout returned with setTimeout

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

HTML Code

<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>

UPDATE

A working fiddle example here.

Hope it helps.

这篇关于Javascript / HTML - 隐藏和显示图像onmouseover和onmouseout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！