hover時の表示設定

html,css,jQueryを使用してコーディングしています。

###発生している問題
navbarのリストのsurfboadをhoverした際にmodalを表示させ、
modalのリストを選択する際も表示させたいのですが、
surfboadをhoverし表示されたmodalへカーソルを移動する際に一度modalが消えてしまいます。

###実現したいこと
カーソルを移動する際もmodalを消さずに表示させたい。

ご回答宜しくお願い致します。

補足情報
bootstrapを使用しています。

該当のソースコード

html
1<!doctype html>
2<html lang="ja">
3
4<head>
5  <!-- Required meta tags -->
6  <meta charset="utf-8">
7  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
8
9  <!-- Bootstrap CSS -->
10  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
11    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
12
13  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
14
15  <title>shop</title>
16
17  <link rel="stylesheet" href="style.css">
18  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
19</head>
20
21<body>
22 <!-- Navigation -->
23 <nav class="navbar navbar-expand-md   bg-light fixed-top ">
24  <a href="#" class="navbar-brand"><img src="img/logo.png" alt="">
25  </a>
26
27  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
28    <span class="navbar-toggler-icon"></span>
29  </button>
30
31  <div class="collapse navbar-collapse justify-content-center">
32      <ul class="navbar-nav ">
33        <li class="nav-item ">
34          <a href="#" class="nav-link ">HOME</a>
35        </li>
36        <li class="nav-item surfboard-modal-open" id="surfboard-modal-open">
37          <a href="#" class="nav-link" >SURFBOARDS</a>
38        </li>
39        <li class="nav-item">
40          <a href="#" class="nav-link">BLOG</a>
41        </li>
42        <li class="nav-item">
43          <a href="#" class="nav-link">BEER</a>
44        </li>
45        <li class="nav-item">
46          <a href="#" class="nav-link">INTERNATIONAL</a>
47        </li>
48        <li class="nav-item">
49          <a href="#" class="nav-link nav-modal-open">STORE</a>
50        </li>
51      </ul>
52  </div>
53
54  <div class="nav-icon">
55    <i class="fas fa-search"></i>
56    <i class="far fa-user-circle"></i>
57    <i class="fas fa-shopping-cart"></i>
58    <span class="navbar-text">$0.00</span>
59  </div>
60</nav>
61<!-- End Navigation -->
62
63
64<!-- start nav-modal-surfboard -->
65<div class="nav-modal-surfboard surfboard-modal-open" id="nav-modal-surfboard">
66  <div class="contain">
67  <div class="item item-1"><a href="">Stock Boards</a></div>
68  <div class="item item-2"><a href="">Surfboard Models</a></div>
69  <div class="item item-3"><a href="">Demo Boards</a></div>
70  <div class="item item-4"><a href="">Art Boards</a></div>
71</div>
72</div>
73<!-- end nav-modal-surfboard -->
74
75
76  <script src="script.js"></script>
77
78  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
79
80  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
81    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
82    crossorigin="anonymous"></script>
83  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
84    integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
85    crossorigin="anonymous"></script>
86</body>
87
88</html>

css
1html {
2  font-size: 62.5%; 
3}
4
5body {
6  font-size: 1.6rem; 
7  margin-top: 80px;
8}
9
10
11/* navigation */
12nav{
13  height:8rem ;
14}
15
16.navbar-brand img{
17  padding: 1rem;
18}
19
20.navbar-nav{
21  margin-top: 2rem;
22}
23
24.nav-item{
25  padding-bottom: 2.5rem;
26}
27
28.nav-link {
29  color: #000000;
30  font-weight: bold;
31  letter-spacing: 0.2rem;
32  margin-left: 2.0rem;
33}
34
35.nav-icon{
36  margin-right: 0.5rem;
37}
38
39.nav-icon i{
40  font-size: 2.0rem;
41  margin-right: 2.0rem;
42}
43
44nav a:hover{
45  color: rgb(196, 164, 25);
46}
47
48nav i:hover{
49  color:rgb(196, 164, 25) ;
50}
51
52
53/* nav-modal-surfboard */
54.nav-modal-surfboard{
55  width: 100%;
56  background-color: #000000;
57  padding: 2rem 0;
58  position: absolute; 
59  top: 8rem;
60  z-index: 1;
61  display: none; 
62}
63
64.nav-modal-surfboard .contain{
65  padding-left: 49rem;
66}
67
68.nav-modal-surfboard .item{
69  margin-bottom: 1rem;
70}
71
72.nav-modal-surfboard .item-1{
73  margin-top: 1rem;
74}
75
76.nav-modal-surfboard a{
77  color: white;
78}
79
80.nav-modal-surfboard a:hover{
81  color: rgb(196, 164, 25);
82  text-decoration: none;
83}

jQuery
1$(function(){
2  $('.surfboard-modal-open').hover(
3    function(){
4   $('#nav-modal-surfboard').fadeIn();
5    },
6    function(){
7      $('#nav-modal-surfboard').fadeOut();
8    }
9  );
10
11});

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

回答2件

ベストアンサー

原因は２つあります。

ひとつは、「navbarのリストのsurfboad」.nav-item.surfboard-modal-openの下に余白があること。
そのため、surfboad から modal へ移動するときに余白を通るのでホバーアウトしてしまいます。

２つめは、もし、余白がないとしても、surfboadを外れたときに、ホバーアウトが発生してしまいます。

一つ目の解決策は、CSSで余白を消します。
bootstrapのnavbarのCSSの余白ですので、へたにいじって他に影響かあるといけないので、surfboad要素のみネガティブマージンを設定して余白を消すようにしてみました。下記のCSSを追加してください。

css
1.surfboard-modal-open {
2  margin-bottom: -.5em;
3}

２つ目の解決策は、setTimeout でホバーアウトを遅延実行されるといいでしょう。

参考リンク
[jQuery] ホバーしてからｎ秒後に発火するイベントの作り方 - Qiita

上記を参考にホバーアウトを遅延実行させます。

jQuery
1$(function(){
2  var setTimeoutConst;
3  $('.surfboard-modal-open').hover(
4    function(){
5      $('#nav-modal-surfboard').fadeIn();
6      clearTimeout(setTimeoutConst);
7    },
8    function(){
9      setTimeoutConst = setTimeout(function() {
10        $('#nav-modal-surfboard').fadeOut();
11      }, 100);
12    }
13  );
14});

CodePenサンプル

解決済みですが、別案を思いついたので追記しておきます。
こちらの方がスマートのような気がします。

.stop()で動作中のアニメーションを止めてから、fadeIn または fadeOutします。

jQuery
1$(function(){
2  var setTimeoutConst;
3  $('.surfboard-modal-open').hover(
4    function(){
5      $('#nav-modal-surfboard').stop().fadeIn();
6    },
7    function(){
8      $('#nav-modal-surfboard').stop().fadeOut();
9    }
10  );
11});