Q&A
質問
サイト模写をしていて、レスポンシブにするためにいろいろコードを変更しているうちにクラス名header-sitelogoのaタグとクラス名header-nav-itemのaタグのホバー状態のcssが反映されなくなってしまいました。display:flex;をこの２つの親要素に書き入れましたが、それが関係しているのでしょうか？解説よろしくおねがいします。
該当のソースコード
css
1.header{ 2 position: relative; 3 background: url(../images/main_visual_111-0x0.jpg)no-repeat; 4 background-size: cover; 5 padding: 40px 0 440px; 6} 7.header-wrapper{ 8 display: flex; 9 align-items: center; 10 max-width:1080px; 11 height: 90px; 12 margin: 0 auto; 13 color: #fff; 14} 15.header-sitelogo{ 16 width: 280px; 17 height: 90px; 18 background: url(../images/siteLogo-pc@2x.png) no-repeat; 19 background-size: contain; 20 text-indent: 100%; 21 white-space: nowrap; 22 overflow: hidden; 23 margin-right: auto; 24} 25.header-sitelogo a{ 26 display: block; 27 width: 100%; 28 height: 100%; 29} 30.header-sitelogo a:hover{ 31 opacity: 0.5; 32} 33.header-nav-box{ 34 list-style-type: none; 35 text-align: center; 36 margin-right: 7%; 37} 38.header-nav-item{ 39 display: inline-block; 40 margin-left: 30px; 41} 42.header-nav-item a{ 43 display: inline-block; 44 font-size: 1.4rem; 45 line-height: 22px; 46 color: #fff; 47} 48.header-nav-item a::after{ 49 content: ''; 50 width: 0; 51 display: block; 52 width: 0; 53 margin: 10px auto 0; 54 border-bottom: 2px solid #fff; 55} 56.header-nav-item a:hover::after{ 57 width: 100%; 58} 59.header-arrow{ 60 width: 100%; 61 text-align: center; 62 position: absolute; 63 bottom: 60px; 64 left: 0; 65} 66.header-arrow img{ 67 color: #fff; 68 transform: rotate(-50%deg); 69 width: 23px; 70 height: 13px; 71} 72.header-overlay{ 73 position: absolute; 74 bottom: 0; 75 left: 0; 76 width: 100%; 77 height: 100%; 78 background: url(../images/mainVisual-overlay@2x.png) no-repeat; 79 background-size: contain; 80 background-position: 0 bottom; 81} 82.header-small-nav{ 83 display: none; 84 width: 100%; 85 height: 45px; 86 color: #656c6e ; 87 line-height: 45px; 88 font-size: 13px; 89 font-weight: 400; 90 padding-left: 7%; 91 background: url(../images/navigation-toggle@2x.png) no-repeat; 92 background-size: 15px 11px; 93 background-position: 93% 50%; 94 background-color: #fff; 95} 96.header-logo-image{ 97 display: none; 98 position: absolute; 99 bottom: 0; 100 left: 0; 101 width: 100%; 102 height: 100%; 103 background: url(../images/siteLogo-small@2x.png) no-repeat; 104 background-position: center; 105 background-size: 98px 89px; 106 text-indent: 100%; 107 white-space: nowrap; 108 overflow: hidden; 109} 110@media(max-width:768px){ 111 .header{ 112 background: url(../images/main_visual_2-0x0_small.jpg) no-repeat; 113 background-size: cover; 114 padding: 0 0 790px; 115 } 116 .header-wrapper{ 117 display: none; 118 } 119 .header-small-nav{ 120 display: block; 121 } 122 .header-logo-image{ 123 display: block; 124 } 125}
html
1<body> 2 <header class="header"> 3 <div class="header-wrapper"> 4 <div class="header-sitelogo"> 5 <a href="#">SITE LOGO</a> 6 </div> 7 <ul class="header-nav-box"> 8 <li class="header-nav-item"><a href="#">TOP</a></li> 9 <li class="header-nav-item"><a href="#">PRODUCT</a></li> 10 <li class="header-nav-item"><a href="#">ABOUT</a></li> 11 <li class="header-nav-item"><a href="#">NEWS</a></li> 12 <li class="header-nav-item"><a href="#">CONTACT</a></li> 13 </ul> 14 </div> 15 <div class="header-small-nav"> 16 MENU 17 </div> 18 <div class="header-logo-image"> 19 LOGO 20 </div> 21 <div class="header-arrow"> 22 <img src="./images/mainVisual-arrow@2x (1).png"> 23 </div> 24 <div class="header-overlay"></div> 25 </header> 26</body>
補足情報（FW/ツールのバージョンなど）
どこが原因かわからないのでコードを長く載せました。
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
<div class="header-overlay"></div>が前面にかぶさってしまっていて、<a>にホバーできない状態のようです。
このHTMLを削除するか、
CSSだけで取り急ぎ解決しようとすると以下のようになると思います。
CSS
1.header-overlay { 2 pointer-events: none; /* ホバーやクリックなどのイベントを無視する */ 3}
投稿2020/04/22 08:53
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/22 10:45