未显示悬停标题时

Question

我正在制作一个网站，其中我使用了 jquery 的悬停功能。 我在网站的 5 个地方使用了悬停功能。但是，当我将鼠标悬停在其中任何一个上时，除了最后一个之外，没有显示主标题。

在这张图片中，我将鼠标悬停在一个 div 上，但我无法看到我想向所有人展示的主标题。这些图片中的相似之处：-

现在在第五张图片中，显示了主标题：-

请帮忙解释一下为什么会这样。

而且我还想知道我应该怎么做，当我将光标放在栏上时，鼠标悬停在上面的链接上会显示出来。

代码：-

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

Answer 1

我改了html和jquery，请试试这个。

您可以通过here查看它

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