toggleを開閉してから画面サイズを大きくすると勝手にhoverが起動してしまう不具合

前提・実現したいこと

レスポンシブwebデザインに対応したヘッダーを作成しています。
画面サイズが767px以下のみ、ナビゲーションを折り畳んで、アコーディオンメニューにより開閉できる様にしたいです。

発生している問題

一度画面サイズを小さくしてアコーディオンメニューを開閉した後、headerと同じ高さあたりでwebブラウザをつまんで大きくしていくと、マウスがウィンドウを操作しているにもかかわらずナビゲーションにhoverが発生してしまいます。
環境としては、jQueryとBootstrapを導入しています。

この不具合を解決できませんでしょうか。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Document</title>
7  <!-- Bootstrap CSS-->
8	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
9  integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10
11<!-- Bootstrap CDN-->
12<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
13<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
14  integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
15  crossorigin="anonymous"></script>
16<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
17  integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
18  crossorigin="anonymous"></script>
19  <link rel="stylesheet" href="test.css">
20
21</head>
22<body>
23  <header>
24    <nav class="navbar">
25            <div id="menu">メニュー</div>
26            <ul class="navbar-navi m-0 p-0 toggle">
27                <li class="nav-item">
28                    <a class="nav-link" href="#">
29                        <span class="nav-link-en">Home</span>
30                        <span class="nav-link-ja">トップページ</span>
31                    </a>
32                </li>
33                <li class="nav-item">
34                    <a class="nav-link" href="#">
35                        <span class="nav-link-en">About</span>
36                        <span class="nav-link-ja">〜について</span>
37                    </a>
38                </li>
39                <li class="nav-item">
40                    <a class="nav-link" href="#">
41                        <span class="nav-link-en">Contact</span>
42                        <span class="nav-link-ja">コンタクト</span>
43                    </a>
44                </li>
45                <li class="nav-item">
46                    <a class="nav-link" href="#">
47                        <span class="nav-link-en">Access</span>
48                        <span class="nav-link-ja">アクセス</span>
49                    </a>
50                </li>
51                <li class="nav-item">
52                    <a class="nav-link" href="#">
53                        <span class="nav-link-en">Link</span>
54                        <span class="nav-link-ja">リンク</span>
55                    </a>
56                </li>
57  
58            </ul>
59        </nav>
60      
61  </header>
62  <script src="test.js"></script>
63</body>
64</html>

CSS
1header {
2  width: 100vw;
3    background-color: #FDFEF6;
4}
5.navbar {
6    width: 90%;
7    max-width: 1100px;
8    margin: 0 auto;
9    padding: 15px;
10}
11
12#menu {
13    display: none;
14}
15
16.navbar {
17    margin: auto;
18}
19
20.navbar-navi {
21    width: 100%;
22    display: flex;
23    list-style: none;
24    text-align: center;
25}
26
27.nav-item {
28    width: 20%;
29    border: 1px solid grey;
30}
31
32.nav-link {
33    color: #432;
34}
35
36.nav-link-en {
37    font-family: 'Work Sans', sans-serif;
38    font-size: 1.6rem;
39    display: block;
40    box-sizing: border-box;
41}
42
43.nav-link-ja {
44    display: block;
45    font-size: 0.8rem;
46}
47
48.nav-link:hover {
49    color: #fff;
50    background-color: #afb19d;
51    transition: 0.2s;
52}
53
54/* mediaquery */
55
56@media screen and (min-width:320px) and (max-width: 767px){ 
57    .navbar-navi {
58        width: 100%;
59        display: block;
60        list-style: none;
61    }
62    .nav-item {
63        width: 100%;
64        border: 1px solid rgb(204, 198, 198);
65    }
66
67    nav .nav-link {
68        display: flex;
69        justify-content: space-between;
70    }
71
72    .nav-link-en {
73        display: inline;
74    }
75
76    .nav-link-ja {
77        display: inline;
78        font-size: 0.9rem;
79    }
80
81    #menu {
82        width: 100%;
83        padding: 10px;
84        margin-bottom: 0;
85        font-size: 1.2rem;
86        display: flex;
87        justify-content: space-between;
88        color: #fff;
89        background-color: #3d3116;
90        cursor: pointer;
91        position: relative;
92    }
93
94    .toggle {
95        display: none;
96    }
97
98    #menu:after {
99        content: "";
100        position: absolute;
101        right: 25px;
102        top: 38%;
103        transition: all 0.2s ease-in-out;
104        display: block;
105        width: 10px;
106        height: 10px;
107        border-top: solid 2px #fff;
108        border-right: solid 2px #fff;
109        -webkit-transform: rotate(135deg);
110        transform: rotate(135deg);
111        }
112
113    #menu.open:after {
114        -webkit-transform: rotate(-45deg);
115        transform: rotate(-45deg);
116        top: 45%;
117    }
118
119}
120
121@media screen and (min-width: 768px) and (max-width: 1024px) {
122    .nav-item {
123        width: 20%;
124        border: 1px solid grey;
125    }
126
127    .nav-link-en {
128        font-family: 'Work Sans', sans-serif;
129        font-size: 1.2rem;
130        display: block;
131    }    
132
133}

Javascript
1$(function(){
2  $('#menu').on('click', function(){
3    $('+.toggle',this).slideToggle();
4    $(this).toggleClass('open');
5  });
6  $(window).resize(function(){
7    var win = $(window).width();
8    var p = 767
9    if (win > p){
10      $(".toggle").show();
11      $(".toggle").removeAttr('style');
12     }
13  })
14})

hatena19

2020/04/06 02:10

.nav-link:hover が適用されるということですか。提示のコードで確認してみましたが、再現できませんでした。Windows Chrome で確認しました。そちらは、どのような環境でしょうか。

退会済みユーザー

2020/04/06 02:49

ありがとうございます。 macのgoogle chromeです。確かにこちらでも、確認できる時とできない時があります。なんとなく、開閉をした直後にブラウザのサイズを動かすと発生しやすい気がします。

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

回答1件

こちらの環境では再現できないので、関係ないかもしれませのが、とりあえず気になった点を指摘しておきます。

css
1header {
2  width: 100%; /*vw → %*/
3  background-color: #FDFEF6;
4}

100vwだとスクロールバーを含めた幅になるので、水平スクロルーバーが出てしまう。

下記のコードは不要では？
メディアクエリでtoggleの表示/非表示の設定をしているので。

js
1  $(window).resize(function(){
2    var win = $(window).width();
3    var p = 767
4    if (win > p){
5      $(".toggle").show();
6      $(".toggle").removeAttr('style');
7     }
8  })
9

投稿2020/04/06 02:56

hatena19

総合スコア33715

退会済みユーザー

2020/04/06 03:29

回答ありがとうございました。mac特有の現象なんでしょうか・・。アドバイスありがとうございます。header幅について修正させて頂きます。 javascriptの方については、toggleを開いた後閉じてから画面を大きくすると、ナビゲーションバーが消えたままになってしまうこと、toggleを開いた状態で画面を大きくすると、ナビゲーションが横並びにならず縦並びになってしまうという２つの不具合があったので、検索してそれを記載すると解決できると判明したので追加しております。