jquery

Question

菜单下的 blink 覆盖层有一个小问题。

$(function() {
     $("ul.topmenu > li > a").mouseover(function(f) {
     if($("body").not(":has(.topMenuOverlay)")){
         $('<div class="topMenuOverlay"></div>').hide().appendTo("body").fadeIn(1000);
        }
   }).mouseout(function(f){
         f.stopPropagation();
         $(".topMenuOverlay").remove();
       });
});

body{
 background:white;
 width:100vw;
 height:100vh
}
ul.topmenu{
 position:absolute;
 width:100%;
 background:red;
 display:flex;
 justify-content:center;
 margin:0;
 padding:0;
 z-index:999;
}
ul.topmenu > li {
 display:inline-block;
 color:white;
 list-style:none;
}
ul.topmenu > li > a {
 display:block;
 padding:1em 2em;
 cursor:pointer;
}
ul li a:hover {
 background:blue;
}
ul li:hover ul {
 display:flex;
}
ul.submenu{
 background:pink;
 display:none;
 list-style:none;
 color:black;
 width:100%;
 position:absolute;
 top:100%;
 left:0px;
 right:0px;
}
ul.submenu > li {
 padding:1em 2em;
}
.topMenuOverlay{
 content:"";
 background:rgba(0,0,0,.5);
 position:fixed;
 top:0;
 left:0;
 width:100vw;
 height:100vh;
 z-index:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul class="topmenu">
<li>
 <a>LINK 1</a>
 <ul class="submenu">
  <li>LINK 1-1</li>
  <li>LINK 1-2</li>
  <li>LINK 1-3</li>
 </ul>
</li>
<li><a>LINK 2</a></li>
<li><a>LINK 3</a></li>
</ul>
</body>

我想要的：

悬停菜单项后 -> 附加带有淡入淡出效果的覆盖层
if is item change (link 1 -> link 2) - 覆盖层仍然打开没有 blink"effect"
如果鼠标离开元素，覆盖层已被移除（最好是淡出，但这是我今天的梦想）

如果有好心人能帮助我，我将不胜感激

Answer 1

您可以通过测试 mouseout 事件的 relatedTarget 在适当的时间切换叠加层。

$(function() {
  $(".topmenu > li > a").mouseover(function(e) {
    if (!$(".topMenuOverlay").length) {
      $('<div class="topMenuOverlay"></div>').hide().appendTo("body").fadeIn(1000);
    }
  });

  $(".topmenu").mouseout(function(e) {
    if (!e.relatedTarget ||
        (e.relatedTarget.nodeName != "LI" &&
         e.relatedTarget.nodeName != "A")) {
      $(".topMenuOverlay").remove();
    }
  });
});

body{
 background:white;
 width:100vw;
 height:100vh
}
ul.topmenu{
 position:absolute;
 width:100%;
 background:red;
 display:flex;
 justify-content:center;
 margin:0;
 padding:0;
 z-index:999;
}
ul.topmenu > li {
 display:inline-block;
 color:white;
 list-style:none;
}
ul.topmenu > li > a {
 display:block;
 padding:1em 2em;
 cursor:pointer;
}
ul li a:hover {
 background:blue;
}
ul li:hover ul {
 display:flex;
}
ul.submenu{
 background:pink;
 display:none;
 list-style:none;
 color:black;
 width:100%;
 position:absolute;
 top:100%;
 left:0px;
 right:0px;
}
ul.submenu > li {
 padding:1em 2em;
}
.topMenuOverlay{
 content:"";
 background:rgba(0,0,0,.5);
 position:fixed;
 top:0;
 left:0;
 width:100vw;
 height:100vh;
 z-index:1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul class="topmenu">
<li>
 <a>LINK 1</a>
 <ul class="submenu">
  <li>LINK 1-1</li>
  <li>LINK 1-2</li>
  <li>LINK 1-3</li>
 </ul>
</li>
<li><a>LINK 2</a></li>
<li><a>LINK 3</a></li>
</ul>
</body>

jquery - mouseover/mouse 离开 - 叠加层闪烁

jquery - mouseover/mouse leave - overlayer blink

mouseover

mouseleave