1

每当我将鼠标悬停在菜单中的第二个按钮上时，就会出现一个“子菜单”。当它出现时，它部分覆盖了 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;
}
4

4 回答 4

3 
$('.submenu').hover(function() {
    $('#container').hide()
}, function() {
    $('#container').show()
});
于 2012-12-29T16:12:12.513 回答
2

.menu > a基本上，只要当前菜单项（其中一个元素）包含子菜单 ( ) ，您就想检测悬停事件.submenu。

关于什么 ：

$('.menu > a').hover(function(){
    if ($(this).find('.submenu').length != 0) {
        $('#container').hide();
    }
}, function(){
    $('#container').show();
});

此外，您的一些 html 结束标记存在问题，您应该确保它们都以正确的顺序关闭，以防止出现意外故障。

于 2012-12-29T16:59:14.247 回答
1

你忘了关闭这个

  • <li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a><div>

    至

    <li class="HOme2"><a id="secondElement" href="www.google.com">Home2</a></li><div>

    对于 Jquery，我认为这会有所帮助

    $('.submenu').mouseenter(function() {
    $('#container').hide()
}).mouseleave(function(){
    $('#container').show()
});
    • 于 2012-12-29T16:48:12.670 回答
    1

    首先给那个 div 2 类名称，如-class1，class2

    在 CSS 中：

            .class1{
            display: none;
            position: absolute;
               }
         .class2{
            display : block;
                }

    在 jquery 中：

             //this would track mouse pointer in/out events
         $("#menu").hover( function(event){ $("#div").attr("class","class1"); }, 
                           function(event){ $("#div").attr("class","class1"); } );
    于 2012-12-29T16:11:03.197 回答