Question

我有两个要素。一个是＆＃34; menu1＆＃34;并且旨在取消隐藏＆＃34; atlas_menu1＆＃34;在鼠标悬停时，将其隐藏在mouseout上。我的问题是我也想要＆＃34; atlas_menu1＆＃34;当鼠标也在其上时保持不被遮挡，但它不起作用。这是我的代码：

<script type="text/javascript"> 
window.a = document.getElementById("menu1"); 
window.e = document.getElementById("atlas_menu1"); 
a.onmouseover=function(){ e.style.display = "block"; };
a.onmouseout=function(){ e.style.display = "none"; };
e.onmouseover=function(){ e.style.display = "block"; };
e.onmouseout=function(){ e.style.display = "none"; }; 
</script>

有关如何正确完成此事的任何想法？如果您将鼠标悬停在菜单选项＆＃34;我们是谁＆＃34;你会看到菜单下来，但悬停在菜单上它会消失。 http://linden.flywheelsites.com

Answer 1

#hiddenpanel{
 width: 150px;
 height:150px;
 background: green;
 display: inline-block;
 display: none;
}

这是一个工作样本：https://jsfiddle.net/huspg48w/2/

Answer 2

应该可以解决问题。

示例代码：

<!DOCTYPE html>
  <html>
  <body>
<h3 onmouseover="" onmouseout="" id="menu1">Menu</h3>
<h3 onmouseover="" onmouseout="" id="atlas_menu1">Sub Menu</h3>

<script type="text/javascript"> 
   window.a = document.getElementById("menu1"); 
   window.e = document.getElementById("atlas_menu1"); 
   a.onmouseover=function(){ e.style.display = "block"; };
   a.onmouseout=function(){ e.style.display = "none"; };
   e.onmouseover=function(){ e.style.display = "block"; };
   e.onmouseout=function(){ e.style.display = "none"; }; 
</script>

以上代码是悬停菜单显示子菜单的示例。

鼠标悬停时不显示JavaScript元素

2 个答案: