###質問の概要
ホバーによる要素表示において、表示後の要素にカーソルを移した場合にも、引き続き表示後の要素を表示させたままにしたいです。

###問題と目的
下記ソースコードで、.nameにホバーしたときに.menuを表示させているのですが、ここでカーソルを.menuに移すと.menuが消えてしまいます。

おそらく「.nameからホバーが外れたから.menuはもういらないよね？」と判断されてしまうためだと思うのですが、目的は.menuを表示させたままにすることです。

みなさんはこのようなケースをどうに解決されますでしょうか？

原因や直し方についてご指導頂ければと思い質問させて頂きました。
宜しくお願い致します。

ちなみに下記ソースコードの実際のサンプルもございますので、よろしければお試し下さい。

###ソースコード
まずは基本的なデザインのHTMLとCSSはこちらです。

html
1<main>
2
3  <article>
4    <div class="name"><p>jon</p></div>
5    <div class="menu">jonのmenu</div>
6  </article>
7
8  <article>
9  <div class="name"><p>smith</p></div>
10    <div class="menu">smithのmenu</div>
11  </article>
12
13</main>

css
1main {
2  display: flex;
3  flex-direction: column;
4  height: 100vh;
5  background: pink;
6  justify-content: center;
7  align-items: center;
8}
9article {
10  position: relative;
11  width: 100px;
12  height: 100px;
13  background: khaki;
14  margin: 50px auto 50px;
15}
16.name {
17  display: flex;
18  justify-content: center;
19  align-items: center;  
20  height: 100%;
21}
22.menu {
23  display: none;
24  justify-content: center;
25  align-items: center;    
26  width: 100px;
27  height: 100px;  
28  position: absolute;
29  left: 50px;
30  background: palegreen;
31}
32.menu.hover-up{
33  display: flex;
34  position: absolute;
35  bottom: calc(50px + 0.5em);
36 }
37.menu.hover-down{
38  display: flex;
39  position: absolute;
40  top: calc(50px + 0.5em);
41}
42.menu.fadeInDown.hover-up {
43  animation-duration: 0.2s;
44  animation-delay: 0.2s;
45}
46.menu.fadeInUp.hover-down {
47  animation-duration: 0.2s;
48  animation-delay: 0.2s;
49}
50.fadeInUp {
51    animation-name: fadeInUp;
52}
53.fadeInDown {
54    animation-name: fadeInDown;
55}
56@keyframes fadeInUp {
57  from {
58    opacity: 0;
59    transform: translate3d(0, 100%, 0);
60  }
61  to {
62    opacity: 1;
63    transform: translate3d(0, 0, 0);
64  }
65}
66@keyframes fadeInDown {
67  from {
68    opacity: 0;
69    transform: translate3d(0, -100%, 0);
70  }
71  to {
72    opacity: 1;
73    transform: translate3d(0, 0, 0);
74  }
75}
76

問題の要素のやりとりは下記のjQueryになります。

jQuery
1// ホバーしたとき
2$(".name p").mouseenter(function() {
3  // top座標と、.user_nameの高さを取得  
4  var that = $(this).closest('article').find('.name');
5  var dy = $(that).offset().top - $(window).scrollTop() + ($(that).outerHeight() / 2);
6  // 画面の高さを取得
7  var windowheight = $(window).innerHeight() / 2;
8  // クラス付与
9  if( dy >= windowheight ){
10    $(this).closest('article').find('.menu').addClass('hover-up fadeInDown');
11  }else{
12    $(this).closest('article').find('.menu').addClass('hover-down fadeInUp');
13  }
14});	
15
16// ホバーやめたとき
17$(".name p, .menu").mouseleave(function() {
18  $(this).closest('article').find('.menu').removeClass("hover-up fadeInDown hover-down fadeInUp");
19});

行動規範の内容に同意します

回答2件

ベストアンサー

一般的なやり方としてはmenuをnameの中の要素とする。
そうすればnameのhoverをたもったままmenuにマウスを移動できる
（menuはnameの一部なので）

どうしても構造が変えられないならnameのmouseoutイベント時に
settimeoutなどで一定期間待機させmenuにmouseoverしたら
menuを非表示にする処理をキャンセルする
もちろんその場合menuのmouseout処理が別途必要

sample

javascript
1<style>
2article{background-Color:aqua}
3.name p{background-Color:yellow;width:200px;}
4.menu{background-Color:lime;width:200px;}
5</style>
6<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
7<script>
8$(function(){
9  var timerId=Array($('.name p').length).fill(null);
10  $('.name p').on('mouseover',function(){
11    var idx=$('.name p').index(this);
12    clearTimeout(timerId[idx]);
13    $('.menu').eq(idx).slideDown();
14  }).on('mouseout',function(){
15    var idx=$('.name p').index(this);
16    timerId[idx]=setTimeout(function(){
17      $('.menu').eq(idx).slideUp();
18    },100);
19  });
20  $('.menu').on('mouseover',function(){
21    var idx=$('.menu').index(this);
22    clearTimeout(timerId[idx]);
23  }).on('mouseout',function(){
24    var idx=$('.menu').index(this);
25    timerId[idx]=setTimeout(function(){
26      $('.menu').eq(idx).slideUp();
27    },100);
28  });
29});
30</script>
31<main>
32<article>
33<div class="name"><p>aaa</p></div>
34<div class="menu" style="display:none">aaaのmenu</div>
35</article>
36<article>
37<div class="name"><p>bbb</p></div>
38<div class="menu" style="display:none">bbbのmenu</div>
39</article>
40<article>
41<div class="name"><p>ccc</p></div>
42<div class="menu" style="display:none">cccのmenu</div>
43</article>
44<article>
45<div class="name"><p>ddd</p></div>
46<div class="menu" style="display:none">dddのmenu</div>
47</article>
48</main>

timerIdは別の処理と競合するのでターゲットの数だけ用意しておきます

追記

よく考えたらarticleにhoverをかませばいいのでは？

CSS
1<style>
2.menu{display:none}
3article:hover>.name+.menu{display:block}
4</style>
5
6<main>
7  <article>
8    <div class="name"><p>jon</p></div>
9    <div class="menu">jonのmenu</div>
10  </article>
11  <article>
12  <div class="name"><p>smith</p></div>
13    <div class="menu">smithのmenu</div>
14  </article>
15</main>