jquery - наведение мыши / отпуск мыши - мигание наложения - PullRequest
Новая
       38

jquery - наведение мыши / отпуск мыши - мигание наложения

0 голосов
/ 27 июня 2018

У меня небольшая проблема с наложением мерцания в меню.

jsfiddle 

$(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) - оверлейный слой все еще открыт без мигать "эффект"

  • если мышь покидает элемент, оверлейный слой был удален (в идеале с затуханием, но это моя мечта на сегодня)

Я был бы очень признателен, если бы мне помогла какая-нибудь добрая душа.

1 Ответ

0 голосов
/ 27 июня 2018

Вы можете переключать оверлей в соответствующее время, проверяя 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;
}
<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>
...