javascript - 将鼠标悬停在菜单栏上时隐藏一个 div

Question

每当我将鼠标悬停在菜单中的第二个按钮上时，就会出现一个“子菜单”。当它出现时，它会部分覆盖 div“容器”中的图像。

子菜单的样式是半透明的，因此 div“容器”内的图像也出现在菜单的背景中，看起来不太好。

我知道简单的解决方案是更改 div 的位置，但这样图像就不会居中，所以这不是一个选项。我想知道是否有可能每当我将鼠标悬停在具有子菜单的按钮上时，当我将鼠标从菜单上移开时，div“容器”会隐藏并再次出现。当鼠标悬停在第一个主页按钮上时，div“容器”不应隐藏，因为它没有子菜单，只要菜单打开，图像就应该保持隐藏状态。在 javascript 或 jQuery 或 CSS3 中有可能吗？？

HTML 代码:

<div id="menu">
            <ul class="menu" id="tempMenu">
                <li class="Home"><a href="www.google.com">Home</a></li>
                <li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>
                        <ul class="submenu">
                            <li>
                                <a id="one" href="">One</a>
                            </li></br>
                            <li>
                                <a id="two" href="">two</a>
                            </li>
                            <li>
                                <a id="three" href="">three</a>
                            </li>
                            <li>
                                <a id="four" href="">four</a>
                            </li>
                            <li>
                                <a id="five" href="">five</a>
                            </li>
                            <li>
                                <a id="six" href="">six</a>
                            </li>
                            <li>
                                <a id="seven" href="">seven</a>
                            </li>
                            <li>
                                <a id="eight" href="">eight</a>
                            </li>
                        </ul>
                    </div>
                </li>
  </ul>
        </div>

<div id="container">

          <div id="box1" class="box">Image1<img src="images/image1.png"></div>
          <div id="box2" class="box">Image2<img src="images/image2.png"></div>
</div>

CSS 代码:

ul.menu .submenu{
    display: none;
   position: absolute;
}

ul.menu li:hover .submenu{
    display: block;
}

Answer 1

$('.submenu').hover(function() {
    $('#container').hide()
}, function() {
    $('#container').show()
});