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

最初library(ggplot2) ggplot(iris, aes(x = Sepal.Length, y = Sepal.Width, shape = Species, color = Species)) + geom_point(size = 5) + coord_fixed(ratio = 1/2) + theme(plot.margin=unit(c(-0.30,0,0,0), "null")) # remove margin around plot您的服务div，我们可以使用jQuery hide()和mouseover()

运行下面的代码片段以查看效果。

mouseleave()

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

.d-none {
  display: none;
}

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>

希望获得帮助。

将鼠标悬停在菜单项上

3 个答案: