下記コードのように.inner_1要素にhoverした時に、.inner_2が表示されるようにcssを書いたのですが
実際には表示されません(display:blockが効かない) JSFiddle
レイヤーの問題かと考え、それぞれpositionとz-indexを設定したのですが、昨日いたしません。
.inner_1にhoverした時に、.inner_2を表示させたいのですが、問題点と解決法をアドバイスください。
よろしくお願い申し上げます。
html
1<div class="wrapper"> 2 <span class="inner_1">hover</span> 3 <span class="inner_2">pop</span> 4</div>
css
1.wrapper{ 2 width:100px; 3 height:100px; 4 background:gray; 5 position:relative; 6 z-index:1; 7} 8 9.inner_1{ 10 cursor:pointer; 11 position:absolute; 12 width:50px; 13 height:20px; 14 background:blue; 15 top:70px; 16 left:0px; 17 z-index:1; 18} 19 20.inner_2{ 21 display:none; 22 cursor:pointer; 23 position:absolute; 24 width:50px; 25 height:20px; 26 background:pink; 27 top:70px; 28 left:90px; 29 z-index:2; 30} 31.inner_1:hover .inner_2{ 32 display:block; 33}
コードの再掲(より詳細なもの)
JSFiddle
html
1<div class="wrapper"> 2 <div class="effect"></div> 3 <form class="" action="#" method="post"> 4 <span class="logout"> 5 <button class="logout_button" type="submit" name="logout" value="logout"> 6 <i class="fas fa-sign-out-alt"></i> 7 </button> 8 </span> 9 </form> 10 <span class="logout_pop">ログアウト</span> 11</div>
css
1.wrapper{ 2 width: 200px; 3 height: 100px; 4 float: left; 5 text-align: center; 6 position: relative; 7 box-sizing: border-box; 8 overflow: hidden; 9 margin-left: auto; 10 z-index: 1; 11 background:gray; 12} 13 14.effect{ 15 width:200px; 16 height:100px; 17 left:-200px; 18 top:-100px; 19 background:#c7c7c778; 20 position:absolute; 21 transition:all .5s ease; 22 z-index:2; 23} 24 25.wrapper:hover .effect{ 26 left:0;top:0; 27} 28 29.logout{ 30cursor: pointer; 31margin-left: 10px; 32position: absolute; 33top:17px; 34right:5px; 35z-index: 10; 36opacity: 0; 37} 38 39.wrapper:hover .logout{ 40 display: block; 41 opacity: 1; 42} 43 44.logout_pop{ 45 cursor:pointer; 46 display: none; 47 background:#b3b3b36b; 48 position: absolute; 49 top: 5px; 50 height: 27px; 51 border-radius: 5px; 52 right: 97px; 53 font-size: 11px; 54 z-index: 100; 55} 56 57.logout:hover + .logout_pop{ 58display: block; 59}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/05/02 03:24
2019/05/02 03:47
2019/05/02 15:16
2019/05/02 15:28
2019/05/02 15:59 編集
2019/05/02 16:34
2019/05/05 14:15