显示div并将其显示在hover jQuery html上

所以我有一个导航菜单，它显示一个特定的div，与li项悬停的位置有关，这很好。我在节目播出时与剧组互动有问题。我使用div而不是嵌套列表，因为当显示div时，不仅仅是链接。我的问题是，当我将鼠标悬停在一个li上，然后尝试单击正在显示的div中的某个内容时，一旦我将鼠标从li移动到所显示的div中，它就会立即消失

这是我的密码：

HTML:

<div class="menu-header-container"> 
<ul>
        <li id="navlink1">
    <a href="#">link one</a>
    </li>
        <li id="navlink2">
    <a href="#">link one</a>
    </li>
    <div id="overlay1">
             <p>some stuff</p>
             <img src="someimage.jpg">
        </div>
    <div id="overlay2">
             <p>some stuff</p>
             <img src="someimage.jpg">
        </div>
</ul>
</div>

jQuery

<script>
$(document).ready(function() {
$('#navlink1 , #navlink2').hover(function() {
$('#overlay1 , overlay2').stop().show();
}, function() {
$('#overlay1 , overlay2').stop().hide();
});
});
</script>

$（文档）.ready（函数（）{
$（'#navlink1，#navlink2'）。悬停（函数（）{
$（“#覆盖1，覆盖2”）.stop（）.show（）；
}，函数（）{
$（'#覆盖1，覆盖2'）.stop（）.hide（）；
});
});

我的jQuery技能几乎不存在，请原谅我的无知

这是一把小提琴：

---

提前谢谢你。

第一眼看到这里有一个打字错误

$('#overlay1 , overlay2')

你需要有

$('#overlay1 , #overlay2')

---

另外，

stop（）

是不必要的，甚至不知道你想做什么。

乍一看，这里有一个打字错误

$('#overlay1 , overlay2')

你需要有

$('#overlay1 , #overlay2')

另外，

stop（）

$(document).ready(function() {
      $('#navlink1 , #navlink2').mouseover(function() {
        $('#overlay1 , #overlay2').toggle();
      });
    });

试试这个：

$(document).ready(function() {
      $('#navlink1 , #navlink2').mouseover(function() {
        $('#overlay1 , #overlay2').toggle();
      });
    });

我对html也做了一些修改

<div class="menu-header-container"> 
    <ul>
        <li id="navlink1">
            <a href="#">link one</a>
        </li>
        <li id="navlink2">
            <a href="#">link one</a>
        </li>
    </ul>
    <div id="overlay1">
        <p>some stuff1</p>
        <img src="someimage.jpg"/>
    </div>
    <div id="overlay2">
        <p>some stuff2</p>
        <img src="someimage.jpg"/>
    </div>
</div>

演示：
我也对html进行了可视更改

<div class="menu-header-container"> 
    <ul>
        <li id="navlink1">
            <a href="#">link one</a>
        </li>
        <li id="navlink2">
            <a href="#">link one</a>
        </li>
    </ul>
    <div id="overlay1">
        <p>some stuff1</p>
        <img src="someimage.jpg"/>
    </div>
    <div id="overlay2">
        <p>some stuff2</p>
        <img src="someimage.jpg"/>
    </div>
</div>

演示：
注意：您的html无效
ul
不能有
div
当使用这种有缺陷的语言时，这并不重要…注意：您的html无效
ul
不能有
div
当使用这种有缺陷的语言时，这并不重要。。。