問題
現状
html
1<header> 2 <a href="index.html" class="logo"> 3 <img src="img/logo.png" alt="logo" width="68" height="41.125"/> 4 </a> 5 6<!-- ホバー関連部、ここから --> 7 <div class="wrap"> 8 <a href="mailto:~~" class="mail"> 9 <img src="img/mail.svg" alt="mail" width="31"/> 10 </a> 11 <img class="balloon" src="img/balloon.svg" alt="balloon" width="45"/> 12 </div> 13<!-- ここまで --> 14 15 <nav> 16 <ul> 17 <li class="current"> 18 <a href="index.html"> 19 ALL 20 </a> 21 </li> 22 <li class="1"> 23 <a href=""> 24 1 25 </a> 26 </li> 27 <li class="2"> 28 <a href=""> 29 2 30 </a> 31 </li> 32 <li class="3"> 33 <a href=""> 34 3 35 </a> 36 </li> 37 <li class="4"> 38 <a href=""> 39 4 40 </a> 41 </li> 42 </ul> 43 </nav> 44</header>
css
1header { 2 width: 100%; 3 position: fixed; 4 z-index: 30; 5} 6 header .logo { 7 float: left; 8 margin-top: 21px; 9 margin-left: 35px; 10} 11 12/* ホバー関連部、ここから */ 13.wrap { 14 position: relative; 15} 16.mail { 17 float: right; 18 margin-top: 29px; 19 margin-right: 47px; 20} 21.balloon { 22 position: absolute; 23 display: none; 24 top: 16px; 25} 26.mail:hover .balloon { 27 display: block; 28} 29/* ここまで */ 30 31nav { 32 text-align: right; 33 margin-right: 137px; 34 margin-bottom: 60px; 35} 36nav ul { 37 margin: 0; 38 list-style-type: none; 39 padding-left: 0; 40} 41nav li { 42 display: inline-block; 43 padding-top: 32px; 44 padding-right: 41px; 45 font-size: 15px; 46} 47nav li > a { 48 text-decoration: none; 49 color: inherit; 50} 51nav li > a:hover { 52 color: royalblue; 53}
試したこと
css
1.wrap { 2 position: relative; 3} 4.mail { 5 float: right; 6 margin-top: 29px; 7 margin-right: 47px; 8} 9.balloon { 10 position: absolute; 11 display: none; 12 top: 16px; 13} 14.mail:hover .balloon { 15 background: url(../img/balloon.svg); /* 変更。変化なし */ 16}
追記
ありがとうございます!
右にいきました!でも、mailの下にきません…
(すいません。.wrap:hover
のにするとちらつきなくなりました。(一瞬下にシュッと通るのはheader
より下の要素に効果つけてるやつなので関係ありません))
&
.wrap
のブロックがあるからだと、
css
1.wrap { 2 width: 31px; /* .mailのimgと同じ幅 */ 3 float: right; 4}
と入れてみたんですが、Chromeがバグって強制終了してしまいました。
よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー