前提・実現したいこと
ナビゲーションメニューの「カテゴリー」にカーソルを当てると「is-opened」というクラスが付与されるコードを作成しました。
対象範囲にマウスが入ると「inview」、出ると「outview」がコンソールログ画面に表示したいです。
発生している問題・エラーメッセージ
対象範囲の中でカーソルを動かすと、「is-opened」が点滅し、その分だけ「inview」と「outview」がコンソール画面にカウントされてしまいます。
カーソルを動かしても点滅しないようにしたいです。
該当のソースコード
HTML
1<body> 2 <div class="header"> 3 <div class="header__wrapper"> 4 <div class="header__logo"></div> 5 <div class="header__nav"> 6 <nav class="nav"> 7 <div class="nav__unit js-global-nav-list"> 8 <div class="nav__unit-heading">カテゴリー</div> 9 <div class="nav__body"> 10 <div class="nav__body-inner"> 11 <ul class="nav__list"> 12 <li class="nav__item"><a href="#">ケーキ</a></li> 13 <li class="nav__item"><a href="#">焼菓子</a></li> 14 <li class="nav__item"><a href="#">チョコレート</a></li> 15 <li class="nav__item"><a href="#">ソース</a></li> 16 </ul> 17 </div> 18 </div> 19 </div> 20 </nav> 21 </div> 22 </div> 23 </div> 24 <script src="main.js"></script> 25 </body>
CSS
1html { 2 font-size: 62.5%; 3} 4 5* { 6 box-sizing: border-box; 7} 8.header { 9 position: relative; 10 &__wrapper { 11 display: flex; 12 flex-direction: row; 13 justify-content: space-between; 14 } 15 &__nav { 16 font-size: 1.5rem; 17 align-self: end; 18 } 19} 20 21.nav { 22 display: flex; 23 flex-direction: row; 24 25 &__unit { 26 margin-left: 20px; 27 height: 20px; 28 } 29 &__unit-heading { 30 cursor: pointer; 31 } 32 &__body { 33 position: absolute; 34 left: 0; 35 right: 0; 36 width: 100%; 37 z-index: 1000; 38 background-color: aqua; 39 overflow: hidden; 40 transition: all 0.5s; 41 height: auto; 42 opacity: 1; 43 } 44 &__body-inner { 45 padding: 40px 0 30px; 46 } 47 &__list { 48 display: flex; 49 flex-flow: row wrap; 50 list-style: none; 51 } 52 53 &__item { 54 flex-basis: calc(100% / 3); 55 margin-bottom: 10px; 56 } 57}
javascript
1document.addEventListener("DOMContentLoaded", function () { 2 const els = document.querySelectorAll(".js-global-nav-list"); 3 4 els.forEach((el) => { 5 el.addEventListener("mouseover", function () { 6 console.log("inview"); 7 this.classList.add("is-opened"); 8 }); 9 el.addEventListener("mouseout", function () { 10 console.log("outview"); 11 this.classList.remove("is-opened"); 12 }); 13 }); 14});
試したこと
対象範囲のパディング部分や文字列部分にカーソルが入ると「.is-opened」が点滅するようですが、対策方法が分からない状態です。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/25 10:02