Question

我在菜单下的眨眼覆盖层有一个小问题。

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

我想要什么：

在菜单项悬停后->使用淡入淡出效果添加上覆层
如果项目更改（链接1->链接2）-覆盖层仍处于打开状态而没有眨眼“效果”
如果鼠标离开了元素，则覆盖层已被移除（理想情况是淡出，但这是我今天的梦想）

如果有任何善良的灵魂可以帮助我，我将非常感激。

Answer 1

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

mouseout

$(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;
}

jQuery-鼠标悬停/鼠标离开-覆层闪烁

1 个答案: