Html 悬停标题未显示时

我正在制作一个使用jquery的悬停功能的网站。 我已经在我的网站上的5个地方使用了悬停功能。但当我在其中任何一个上悬停时，除了最后一个标题外，主标题都不会显示

在这张图片中，我在一个div上悬停，我无法看到我想展示给大家的主标题。在这些图像中类似：-

现在在第5幅图中，显示了主标题：-

请帮助解释为什么会发生这种情况

我还想知道我应该怎么做，当我把光标放在鼠标悬停时显示的条上，点击上面的链接

代码：-

        <a href="" id="men" class="h">MEN</a></h4>

        <a href="" id="women" class="h">WOMEN</a></h4>

        <a href="" class="h" id="kids">KIDS</a></h4>

        <a href="" class="h" id="homeliving">HOME & LIVING</a></h4>

        <a href="" class="h" id="offers">OFFERS</a></h4>
    </div>
<div class="items hidden">
        <p id="topwear" class="hidden">MEN</p>
        <p class="para hidden"><a href="">T-Shirts</a></p>
        <p class="para hidden"><a href="">Casual shirts</a></p>
        <p class="para hidden"><a href="">Formal shirts</a></p>
        <p class="para hidden"><a href="">Sweat shirts</a></p>
        <p class="para hidden"><a href="">Sweaters</a></p>
        <p class="para hidden"><a href="">Jackets</a></p>
</div>
<div class="items hidden">
        <p id="indian" class="hidden">WOMEN</p>
        <p class="para hidden"><a href="">T-Shirts</a></p>
        <p class="para hidden"><a href="">Casual shirts</a></p>
        <p class="para hidden"><a href="">Formal shirts</a></p>
        <p class="para hidden"><a href="">Sweat shirts</a></p>
        <p class="para hidden"><a href="">Sweaters</a></p>
</div>
<div class="items hidden">
        <p id="boys" class="hidden">KIDS</p>
        <p class="para hidden"><a href="">T-Shirts</a></p>
        <p class="para hidden"><a href="">Casual shirts</a></p>
        <p class="para hidden"><a href="">Formal shirts</a></p>
        <p class="para hidden"><a href="">Sweat shirts</a></p>
        <p class="para hidden"><a href="">Sweaters</a></p>
</div>
<div class="items hidden">
        <p id="bed" class="hidden">HOME & LIVING</p>
        <p class="para hidden"><a href="">T-Shirts</a></p>
        <p class="para hidden"><a href="">Casual shirts</a></p>
        <p class="para hidden"><a href="">Formal shirts</a></p>
        <p class="para hidden"><a href="">Sweat shirts</a></p>
        <p class="para hidden"><a href="">Sweaters</a></p>
</div>
<div class="items hidden">
        <p id="kurta" class="hidden">OFFERS</p>
        <p class="para hidden"><a href="">T-Shirts</a></p>
        <p class="para hidden"><a href="">Casual shirts</a></p>
        <p class="para hidden"><a href="">Formal shirts</a></p>
        <p class="para hidden"><a href="">Sweat shirts</a></p>
        <p class="para hidden"><a href="">Sweaters</a></p>

</div><script type="text/javascript">

    $("#men").hover(function() {

        $(".items").toggleClass("hidden");
        $("#topwear").toggleClass("hidden");
        $(".para").toggleClass("hidden");
        
    });
    
    $("#women").hover(function() {

        $(".items").toggleClass("hidden");
        $("#indian").toggleClass("hidden");
        $(".para").toggleClass("hidden");
        
    });

    $("#kids").hover(function() {

        $(".items").toggleClass("hidden");
        $("#boys").toggleClass("hidden");
        $(".para").toggleClass("hidden");
        
    });

    $("#homeliving").hover(function() {

        $(".items").toggleClass("hidden");
        $("#bed").toggleClass("hidden");
        $(".para").toggleClass("hidden");
        
    });

    $("#offers").hover(function() {

        $(".items").toggleClass("hidden");
        $("#kurta").toggleClass("hidden");
        $(".para").toggleClass("hidden");
        
    });
</script>

男人







女性





孩子们






家庭与生活






优惠





$（“#男”）。悬停（函数（）{
$（“.items”）.toggleClass（“隐藏”）；
$（“#topwear”）.toggleClass（“隐藏”）；
$（“.para”）.toggleClass（“隐藏”）；
});
$（“#女性”）。悬停（函数（）{
$（“.items”）.toggleClass（“隐藏”）；
$（“#印度”）。切换类别（“隐藏”）；
$（“.para”）.toggleClass（“隐藏”）；
});
$（“#kids”）.hover（函数（）{
$（“.items”）.toggleClass（“隐藏”）；
$（“#男孩”）。切换类别（“隐藏”）；
$（“.para”）.toggleClass（“隐藏”）；
});
$（“#家庭生活”）.hover（函数（）{
$（“.items”）.toggleClass（“隐藏”）；
$（“#床”）.toggleClass（“隐藏”）；
$（“.para”）.toggleClass（“隐藏”）；
});
$（“#提供”）.hover（函数（）{
$（“.items”）.toggleClass（“隐藏”）；
$（“#kurta”）.toggleClass（“隐藏”）；
$（“.para”）.toggleClass（“隐藏”）；
});

我更改了html和jquery，请尝试此操作

你可以从网上查到

男士






女性





孩子们






家庭与生活






优惠





$（“.menu_link”）.hover（函数（）{
target_id=$（this.attr（'id'））
$（'.items:not（[data-target_id=“'+target_id+”）））.addClass（'hidden'））
$（'.items[data-target_id=“'+target_id+'”）.removeClass（'hidden'））
})
$（“主体”）。悬停（函数（e）{
变量菜单包含=$（“.items”）；
如果（！menu_contain.is（e.target）&&menu_contain.has（e.target）.length==1）{
$（'.items'）.addClass（'隐藏'）
}
})

这对我有帮助，但还不够充分。现在，当我从div中移除光标时，该条不再隐藏，这是我不想要的。我希望当我将鼠标悬停在div上时，现在显示该条，当我的光标在该条上单击链接时，该条不会隐藏。但当我的光标不在该条上时，它应该隐藏。请帮助。@Abhinavvijaywargiya我已经更新了我的代码，请检查。谢谢，它解决了我的大部分问题。但是现在当我们悬停在div上时，显示了条，但要隐藏条，我们必须先将光标放在条上，然后从条上删除光标。我不想这样。我已经更新了代码，请检查是的，谢谢。这就是我想要的

<div>
  <a href="" id="men" class="h menu_link">MEN</a>
  <a href="" id="women" class="h menu_link">WOMEN</a>
  <a href="" class="h menu_link" id="kids">KIDS</a>
  <a href="" class="h menu_link" id="homeliving">HOME & LIVING</a>
  <a href="" class="h menu_link" id="offers">OFFERS</a>
</div>
<div class="items hidden" data-target_id="men">
  <p id="topwear">MEN</p>
  <p class="para"><a href="">T-Shirts</a></p>
  <p class="para"><a href="">Casual shirts</a></p>
  <p class="para"><a href="">Formal shirts</a></p>
  <p class="para"><a href="">Sweat shirts</a></p>
  <p class="para"><a href="">Sweaters</a></p>
  <p class="para"><a href="">Jackets</a></p>
</div>
<div class="items hidden" data-target_id="women">
  <p id="indian">WOMEN</p>
  <p class="para"><a href="">T-Shirts</a></p>
  <p class="para"><a href="">Casual shirts</a></p>
  <p class="para"><a href="">Formal shirts</a></p>
  <p class="para"><a href="">Sweat shirts</a></p>
  <p class="para"><a href="">Sweaters</a></p>
</div>
<div class="items hidden" data-target_id="kids">
  <p id="boys">KIDS</p>
  <p class="para"><a href="">T-Shirts</a></p>
  <p class="para"><a href="">Casual shirts</a></p>
  <p class="para"><a href="">Formal shirts</a></p>
  <p class="para"><a href="">Sweat shirts</a></p>
  <p class="para"><a href="">Sweaters</a></p>
</div>
<div class="items hidden" data-target_id="homeliving">
  <p id="bed">HOME & LIVING</p>
  <p class="para"><a href="">T-Shirts</a></p>
  <p class="para"><a href="">Casual shirts</a></p>
  <p class="para"><a href="">Formal shirts</a></p>
  <p class="para"><a href="">Sweat shirts</a></p>
  <p class="para"><a href="">Sweaters</a></p>
</div>
<div class="items hidden" data-target_id="offers">
  <p id="kurta">OFFERS</p>
  <p class="para"><a href="">T-Shirts</a></p>
  <p class="para"><a href="">Casual shirts</a></p>
  <p class="para"><a href="">Formal shirts</a></p>
  <p class="para"><a href="">Sweat shirts</a></p>
  <p class="para"><a href="">Sweaters</a></p>
</div>

<script type="text/javascript">
  $(".menu_link").hover(function() {
    target_id = $(this).attr('id')
    $('.items:not([data-target_id="' + target_id + '"])').addClass('hidden')
    $('.items[data-target_id="' + target_id + '"]').removeClass('hidden')
  })
  $("body").hover(function(e) {
    var menu_contain = $(".items");
    if (!menu_contain.is(e.target) && menu_contain.has(e.target).length === 1) {
     $('.items').addClass('hidden')
    }
  })
</script>