悬停/鼠标进入/鼠标离开菜单项

Question

希望实现以下内容。

我有一个导航菜单，当我将鼠标悬停在“服务”链接上时，会显示一个子菜单。如果光标从主菜单中的“服务”移开并悬停在子菜单上，并且光标在页面周围移动，子菜单将保持显示。将鼠标悬停在其他主菜单项之一时，子菜单将消失。

本网站上的菜单示例（对链接表示歉意，我知道页面可能很快会更改，但显示为描述所需内容的最简单方法）https://kota.co.uk/

我正在使用 WordPress

菜单结构示例

HTML

<div class="slide-in-menu-container">
<div class="menu__main">
<a class="menu__block" href="/home">Home</a>
<a class="menu__services" href="/services">Services</a>
<a class="menu__block" href="/work">Work</a>
<a class="menu__block" href="/about">About</a>
<a class="menu__block" href="/contact">Contact</a>
</div>

<div class="menu__services--hover">
<a href="/link">link</a>
<a href="/link">link</a>
<a href="/link">link</a>
<a href="/link">link</a>
</div>
</div>

我没有展示任何 jQuery，因为我尝试了几种不同的解决方案，但不知道哪个最好展示，但在我将鼠标悬停在另一个菜单项上之前，它们都不会显示子菜单。

Answer 1

最初 hide() 你的服务 div 我们可以通过使用 jQuery mouseover() 和 mouseleave() 来实现这一点

在下面运行 sn-p 以查看实际情况。

$(".menu__services").mouseover(function() {
 $('.menu__services--hover').removeClass('d-none')
  $(".menu__block").mouseover(function() {
    $('.menu__services--hover').addClass('d-none')
 });
   });

.d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slide-in-menu-container">
  <div class="menu__main">
    <a class="menu__block" href="/home">Home</a>
    <a class="menu__services" href="/services">Services</a>
    <a class="menu__block" href="/work">Work</a>
    <a class="menu__block" href="/about">About</a>
    <a class="menu__block" href="/contact">Contact</a>
  </div>

  <div class="menu__services--hover d-none">
    <a href="/link">link</a>
    <a href="/link">link</a>
    <a href="/link">link</a>
    <a href="/link">link</a>
  </div>
</div>

Answer 2

当鼠标悬停在另一个菜单上时，只需隐藏所有菜单，然后显示您要显示的菜单，不要在 mouseleve 上添加功能

Answer 3

@AlwaysHelping 的回答很好，当鼠标离开主菜单选项时出现问题，子菜单面板没有隐藏，所以我只是更正并针对该问题进行了修改。

它会检查主菜单和子菜单是否已经鼠标悬停，然后它不会为d-none添加类。

$(document).ready(function(){
    $(".menu__services").mouseenter(function() {
        $('.menu__services--hover').removeClass('d-none')
    });

    $(".menu__services, .menu__services--hover").mouseleave(function() {
        setTimeout(function(){
            if(!$('.menu__services:hover').length && !$(".menu__services--hover:hover").length){
                $(".menu__services--hover").addClass('d-none')
            }
        }, 100);
    });
});

.d-none {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slide-in-menu-container">
  <div class="menu__main">
    <a class="menu__block" href="/home">Home</a>
    <a class="menu__services" href="/services">Services</a>
    <a class="menu__block" href="/work">Work</a>
    <a class="menu__block" href="/about">About</a>
    <a class="menu__block" href="/contact">Contact</a>
  </div>

  <div class="menu__services--hover d-none">
    <a href="/link">link</a>
    <a href="/link">link</a>
    <a href="/link">link</a>
    <a href="/link">link</a>
  </div>
</div>

希望对您有所帮助。