jQuery悬停时显示，鼠标移开时隐藏

Question

我有一个 div，我希望它的工作方式类似于汉堡菜单。当鼠标悬停在 #Nnav 上时，.dd 应该出现，然后在取消悬停时再次消失。我不知道缺少什么，但 div 始终可见（尝试用 CSS 隐藏它，然后它始终保持隐藏状态）。到目前为止，这是我的代码：

HTML:

<div id="menu">
 <img class="Nmenu" id="Nnav" src="images/nav.png">
  <div class="Nmenu" id="dd">
   <div class="Nmenu" id="dropdown"></div>
    <a class="Nmenu buttons" id="B1" href="#">Page 1</a>
    <a class="Nmenu buttons" id="B2" href="#">Page 2</a>
    <a class="Nmenu buttons" id="B3" href="#">Page 3</a>
 </div> </div>

CSS:

#dd {display: none;}

jQuery:

$("#Nnav").on({
mouseover: function() {
    $("#dd").stop().show();
},
mouseout: function() {
    $("#dd").stop().hide();
} })

Answer 1

#dd {
    display: none;
}
#Nnav:hover + #dd {
    display: block;
}

<div id="menu">
    <img class="Nmenu" id="Nnav" src="https://via.placeholder.com/50">
    
    <div class="Nmenu" id="dd">
        <div class="Nmenu" id="dropdown"></div>
        <a class="Nmenu buttons" id="B1" href="#">Page 1</a>
        <a class="Nmenu buttons" id="B2" href="#">Page 2</a>
        <a class="Nmenu buttons" id="B3" href="#">Page 3</a>
    </div>
</div>

不过，这不能用作菜单切换器，因为一旦您离开图像，菜单就会消失。您需要将菜单作为子元素：

#dd {
    display: none;
}

#Nnav {
    display: inline-block;
}

#Nnav:hover #dd {
    display: block;
}

<div id="Nnav">
    <img class="Nmenu" src="https://via.placeholder.com/50">

    <div class="Nmenu" id="dd">
        <div class="Nmenu" id="dropdown"></div>
        <a class="Nmenu buttons" id="B1" href="#">Page 1</a>
        <a class="Nmenu buttons" id="B2" href="#">Page 2</a>
        <a class="Nmenu buttons" id="B3" href="#">Page 3</a>
    </div>
</div>

Answer 2

CSS 选择器错误。选择 id

的元素时需要#

#dd {
  display: none;
}

Answer 3

嗨，如果你想用 jQuery 来做，你可以切换 class on/off

$("#Nnav").on({
    mouseover: function() {
            $("#dd").toggleClass('dd');
    },
    mouseout: function() {
            $("#dd").toggleClass('dd');
    }
})

Fiddle

Answer 4

我认为问题出在 css 上。 dd 不是 class 它是一个 id。应该是 #dd {display: none;} 而不是 .dd {display: none;}

jQuery悬停时显示，鼠标移开时隐藏

jQuery show on hover, hide when mouse moves away

html

jquery

show

hover

hide