javascript - 当鼠标进入 div 时显示顶部菜单栏

Question

我有一个虚拟 div 和一个充当我的顶级菜单的实际 div。我想在鼠标进入 menu-bar-dummy 时显示 editor-menu-bar 并在鼠标离开时隐藏 editor-menu-bar 菜单栏虚拟。

这段代码几乎可以正常工作。只是编辑器菜单栏一直在闪烁。快速调试表明，即使我将鼠标移动到 menubar 或 menubardummy

上的任何位置，我的 mouseleave 函数仍会继续触发

我在这里做错了什么？

var menubar = $('.editor-menu-bar');
var menubardummy = $('.menu-bar-dummy');
menubardummy.mouseenter(function() {
  menubar.slideDown();
}).mouseleave(function() {
  menubar.slideUp();
});

.menu-bar-dummy {
  position: absolute;
  top: 0px;
  left: 0px;
  min-height: 55px;
  z-index: -100;
}

.editor-menu-bar {
  min-height: 50px;
  height: 50px;
  padding-top: 5px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 zero-padd menu-bar-dummy"></div>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 editor-menu-bar" style="display: none;">
  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 logo">
    <img src="./img/c.png" height="40px">
  </div>
</div>

Answer 1

我想通了。此代码有效 -

var menubar = $('.editor-menu-bar');
    var menubardummy = $('.menu-bar-dummy');
    menubardummy.mouseenter(function(){
        menubar.slideDown("slow", function(){
            menubar.mouseleave("slow", function(){
                menubar.slideUp();
            });
        });
    });

发生的事情是，一旦 slideDown 完成，就会触发 menubardummy 的 mouseleave，因为菜单栏会出现在它上面。这导致了弹跳效应。

新的 css(注意 z-index)-

.menu-bar-dummy{position:absolute; top:0px; left:0px; min-height:55px; z-index:9000; width:100%;}

.editor-menu-bar{min-height:50px; height:50px; padding-top:5px; z-index:10000; box-shadow:0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); display:none;}