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()
});

Answer 2

您基本上想要在当前菜单项（.menu > a元素之一）包含子菜单（.submenu）时检测悬停事件。

怎么样：

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

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

Answer 3

首先给出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"); } );

Answer 4

您忘记关闭此

<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()
});

将鼠标悬停在菜单栏上时隐藏div

4 个答案: