Q&A
visibility: hidden;で隠した要素をhoverした時に表示させたいです。
コーディング的には合っていると思うのですが、なぜかhoverが上手く効きません。
どのような問題点が考えられるでしょうか。
該当のソースコード
html
1 <header id="header"> 2 <div class="container"> 3 <div class="sitelogo"> 4 <h1><a href="#">Write</a></h1> 5 <p>書くためのテーマ</p> 6 </div> 7 8 <nav class="gnav"> 9 <ul> 10 <li class="home"><a href="#">ホーム<span class="fas fa-angle-down"></span></a></li> 11 <ul class="homesub"> 12 <li><a href="#">→カスタマイズ</a></li> 13 </ul> 14 <li class="page"><a href="#">ページ<span class="fas fa-angle-down"></span></a></li> 15 <ul class="pagesub"> 16 <li><a href="#">アイキャッチ画像無しのページ</a></li> 17 <li><a href="#">ページ（全幅テンプレート）</a></li> 18 </ul> 19 <li><a href="#">タイポグラフィー</a></li> 20 <li><a href="#">お問い合わせ</a></li> 21 </ul> 22 </nav> 23 </header>
css
1 2 3ul { 4 list-style: none; 5 margin-top: 40px; 6} 7header { 8 height: 152px; 9 width: 100%; 10 margin-top: 50px; 11} 12.container { 13 width: 1040px; 14 margin: 0 auto; 15 display: flex; 16 justify-content: space-between; 17} 18.sitelogo p { 19 font-size: 18px; 20 color: #777; 21} 22.gnav ul{ 23 display: flex; 24} 25.gnav li{ 26 font-size: 16.884px; 27 padding: 0 15px; 28} 29.gnav li a { 30 display: block; 31} 32.home, 33.page { 34 position: relative; 35} 36.homesub, 37.pagesub{ 38 position: absolute; 39 visibility: hidden; 40 height: 50px; 41 width: 200px; 42} 43.homesub { 44 line-height: 50px; 45 border: 1px solid #f0f0f0; 46 box-shadow: 0.5px 0.5px #f0f0f0; 47 background-color: #fff; 48} 49.home:hover .homesub{ 50 visibility: visible; 51} 52.page:hover .pagesub { 53 visibility: visible; 54} 55.pagesub { 56 flex-direction: column; /* 要素を縦並びにする */ 57 margin-left: 100px; 58} 59.pagesub li { 60 font-size: 16px; 61 border: 1px solid #f0f0f0; 62 box-shadow: 0.5px 0.5px #f0f0f0; 63 background-color: #fff; 64} 65.fas { 66 margin-left: 10px; 67}
回答1件
0
ベストアンサー
typoです。
.home:hover .homesub→.home:hover+.homesub
投稿2021/11/30 03:55
総合スコア36158
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/11/30 04:00