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

Привет, если вы хотите сделать это с помощью jQuery, вы можете просто включить / выключить класс

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

Fiddle

Answer 2

#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 3

Я думаю, что проблема с CSS.дд это не класс, это идентификатор.Это должно быть #dd {display: none;} не .dd {display: none;}

Answer 4

CSS селектор неверен.Вам нужно # при выборе элемента с идентификатором

#dd {
  display: none;
}