前提・実現したいこと
ウェブサイト制作中で、行き詰ってしまいました。Googleでも調べましたが、解決方法が見つからず、こちらに質問させて頂きます。
【実現したいこと】
ハンバーガーメニューが閉じている状態で、メニューボタンは隠れている状態であるのに、なぜかマウスはhoverし、リンク先が押せてしまいます。閉じている状態ではリンクが反応しないようにしたいです。
該当のソースコード
html
1 2<div class="hamburger"> 3 <span></span> 4 <span></span> 5 <span></span> 6</div> 7 8<nav class="globalMenuSp"> 9 <ul> 10 11 <li><a href="#news"><span class="animation"><img src="img/nav_news.svg" alt="News" /></span></a><a href="#news"><span class="animation">News</span></a></li> 12 13 <li><a href="Room&Facility/index.html"><span class="animation"><img src="img/nav_room&facility.svg" alt="Room and Facility" /></span></a><a href="Room&Facility/index.html"><span class="animation">Room and Facility</span></a></li> 14 15 <li><a href="Access/index.html"><span class="animation"><img src="img/nav_access.svg" alt="Access" /></span><a href="Access/index.html"><span class="animation">Access</span></a></li> 16 17 <li><a href="Booking/index.html"><span class="animation"><img src="img/nav_booking.svg" alt="Booking" /></span></a><a href="Booking/index.html"><span class="animation">Booking</span></a></li> 18 19 <li><a href="Rent_a_house/index.html"><span class="animation"><img src="img/nav_rent_a_house.svg" alt="Rent a house" /></span></a><a href="Rent_a_house/index.html"><span class="animation">Rent a house</span></a></li> 20 21 <li><a href="Job_offer/index.html"><span class="animation"><img src="img/nav_job_offer.svg" alt="Job offer" /></span></a><a href="Job_offer/index.html"><span class="animation">Job offer</span></a></li> 22 23 </ul> 24</nav> 25
css
1 2.hamburger { 3 display : block; 4 position: fixed; 5 z-index : 3; 6 right : 13px; 7 top : 12px; 8 width : 42px; 9 height: 42px; 10 cursor: pointer; 11 text-align: center; 12 border-radius: 35%; 13 background:rgba(255,255,255,0.8) ; 14 border: 1.8px solid #275a6e; 15} 16.hamburger span { 17 display : block; 18 position: absolute; 19 width : 25px; 20 height : 2px ; 21 left : 8.5px; 22 background : #275a6e; 23 -webkit-transition: 0.3s ease-in-out; 24 -moz-transition : 0.3s ease-in-out; 25 transition : 0.3s ease-in-out; 26} 27.hamburger span:nth-child(1) { 28 top: 12px; 29} 30.hamburger span:nth-child(2) { 31 top: 20px; 32} 33.hamburger span:nth-child(3) { 34 top: 28px; 35} 36 37/* ナビ開いてる時のボタン */ 38.hamburger.active { 39 -webkit-transition: all 0.3s ease-in-out; 40 -o-transition : all 0.3s ease-in-out; 41 transition : all 0.3s ease-in-out; 42 -webkit-transition-delay: 0.6s; 43 -o-transition-delay : 0.6s; 44 transition-delay : 0.6s; 45 -webkit-transform: rotate(45deg); 46 -ms-transform : rotate(45deg); 47 -o-transform : rotate(45deg); 48 transform : rotate(45deg); 49 border-radius: none; 50 background:none ; 51 border: none; 52} 53.hamburger.active span:nth-child(2){ 54 width: 0px; 55} 56.hamburger.active span:nth-child(1), 57.hamburger.active span:nth-child(3){ 58 background :#fff; 59 -webkit-transition-delay: 0.3s; 60 -o-transition-delay: 0.3s; 61 transition-delay: 0.3s; 62} 63.hamburger.active span:nth-child(1){ 64 -webkit-transform: translateY(0px); 65 -ms-transform : translateY(0px); 66 -o-transform : translateY(0px); 67 transform : translateY(0px); 68} 69 70.hamburger.active span:nth-child(3){ 71 -webkit-transform: translateY(-16px) rotate(90deg); 72 -ms-transform: translateY(-16px) rotate(90deg); 73 -o-transform : translateY(-16px) rotate(90deg); 74 transform : translateY(-16px) rotate(90deg); 75} 76 77 78nav.globalMenuSp { 79 position: fixed; 80 z-index : 2; 81 top : 0; 82 left : 0; 83 height: 100%; 84 color: #fff; 85 background: rgba(0,0,0,0.7); 86 text-align: center; 87 width: 100%; 88 opacity: 0; 89 transition: opacity .6s ease, visibility .6s ease; 90} 91 92nav.globalMenuSp ul { 93 width: 100%; 94 display: flex; 95 flex-direction: row; 96 flex-wrap: wrap; 97 justify-content: center; 98 margin-top: 0; 99 margin-right: auto; 100 margin-bottom: 0; 101 margin-left: auto; 102 padding-top: 150px; 103 padding-right: 0; 104 padding-bottom: 0; 105 padding-left: 0; 106} 107 108nav.globalMenuSp ul li { 109 display: flex; 110 flex-direction: column; 111 list-style-type: none; 112 padding: 0; 113 width: 33%; 114 transition: .4s all; 115 font-family: "Koruri Regular sub"; 116 font-size: 0.8rem; 117} 118 119nav.globalMenuSp ul li img { 120 width: 50%; 121 margin-left: 25%; 122 margin-right: 25%; 123 margin-bottom: -20px; 124} 125 126 127nav.globalMenuSp ul li:last-child { 128 padding-bottom: 0; 129} 130nav.globalMenuSp ul li:hover{ 131 background :#ddd; 132} 133 134nav.globalMenuSp ul li a { 135 display: block; 136 color: #fff; 137 padding: 1em 0; 138 text-decoration :none; 139} 140 141/* このクラスを、jQueryで付与・削除する */ 142nav.globalMenuSp.active { 143 opacity: 100; 144 visibility: visible; 145 146} 147
JavaScript
1// JavaScript Document 2 3 //ハンバーガーメニュー 4$(function() { 5 $('.hamburger').click(function() { 6 $(this).toggleClass('active'); 7 8 if ($(this).hasClass('active')) { 9 $('.globalMenuSp').addClass('active'); 10 } else { 11 $('.globalMenuSp').removeClass('active'); 12 } 13 }); 14}); 15
試したこと
こちらのリンク先の症状が似ていましたので、同じようにopacity,visibilityをいじってみましたが、症状は変わりませんでした。
補足情報(FW/ツールのバージョンなど)
試したブラウザ、Google chrome、Microsoft edge、Firefox
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/21 05:10