初歩的かもしれませんがお願いします。
テキストボタンをロールオーバーするとその下にメニューがフェードインで表示されテキストボタンに背景色もフェードインされる仕組みです。こちらはロールオーバーすると「is_active」というクラスをメインのテキストとサブメニューにaddClassしてtransitionでフェードインさせています。
以下ソースコードです。
html
1<header> 2 <div id="navpanel"> 3 <p>ナビゲーションパネル</p> 4 </div> 5</header> 6<nav id="gNav"> 7 <ul> 8 <li><a href="#">ナビゲーション1</a></li> 9 <li><a href="#">ナビゲーション2</a></li> 10 <li><a href="#">ナビゲーション3</a></li> 11 <li><a href="#">ナビゲーション4</a></li> 12 <li><a href="#">ナビゲーション5</a></li> 13 </ul> 14</nav> 15
css
1* { 2 margin: 0; 3 padding: 0; 4} 5 6header { 7 display: block; 8 padding: ; 9 border-bottom: 1px solid #ccc; 10} 11 12#navpanel { 13 width: 200px; 14 padding: 20px; 15 cursor: pointer; 16 background-color: #fff; 17 transition: all 0.4s ease; 18} 19 20#navpanel.is_active { 21 background-color: #ccc; 22} 23#gNav { 24 position: absolute; 25} 26#gNav ul { 27 display: flex; 28 list-style-type: none; 29 padding: 20px; 30 opacity: 0; 31 background-color: #ccc; 32 transition: all 0.4s ease; 33} 34 35#gNav ul.is_active { 36 opacity: 1; 37} 38 39#gNav ul li { 40 font-size: 14px; 41 margin-left: 10px; 42 transform: translate(0, 10px); 43 visibility: hidden; 44 opacity: 0; 45 transition: all 0.4s ease 0.2s; 46} 47 48#gNav ul.is_active li { 49 transform: translate(0, 0); 50 visibility: visible; 51 opacity: 1; 52} 53 54#gNav ul.is_active li:nth-child(1) { 55 transition: all 0.4s ease 0.13s; 56} 57#gNav ul.is_active li:nth-child(2) { 58 transition: all 0.4s ease 0.16s; 59} 60#gNav ul.is_active li:nth-child(3) { 61 transition: all 0.4s ease 0.19s; 62} 63#gNav ul.is_active li:nth-child(4) { 64 transition: all 0.4s ease 0.2s; 65} 66#gNav ul.is_active li:nth-child(5) { 67 transition: all 0.4s ease 0.23s; 68} 69 70#gNav ul li a { 71 color: #333; 72 text-decoration: none; 73} 74
jquery
1 2$("#navpanel").hover( 3 function() { 4 $(this).addClass("is_active"); 5 $("#gNav ul").addClass("is_active"); 6 }, 7 function() { 8 $("#gNav ul").removeClass("is_active"); 9 $(this).removeClass("is_active"); 10 } 11); 12 13
この処理だとテキストボタンからマウスポインターが外れると、当たり前ですがロールアウトになりテキストボタンとサブメニューがフェードアウトします。
ただテキストボタンにマウスオーバーしてサブメニューが表示されてるときに、サブメニューにマウスポインターが乗った場合は、テキストボタンの背景色も表示させたままにしたいのです。
しかし、その処理が分かりません。
ご教授いただければ幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/08/09 18:33
2019/08/10 04:12
退会済みユーザー
2019/08/11 16:04