hoverイベントで要素をマウスオーバーさせたら隠しておいた文字を表示させたいんですが、
マウスを重ねたところ重ねたところ以外が下がってしまう?現象をなくしたいです。
html
1<div id="itemArea"> 2 <a class="button"> 3 <p>number</p> 4 <pre></pre> 5 <p>name</p> 6 <p class="fukidashi">ほげほげ</p> 7</a> 8 9<a class="button"> 10 <p>number</p> 11 <pre></pre> 12 <p>name</p> 13 <p class="fukidashi">ほげほげ</p> 14</a> 15 16<a class="button"> 17 <p>number</p> 18 <pre></pre> 19 <p>name</p> 20 <p class="fukidashi">ほげほげ</p> 21</a> 22 23</div>
css
1.button{ 2display:inline-block; 3width:20%; 4height:70px; 5text-align:center; 6text-decoration:none; 7padding-bottom:1px; 8outline:none; 9margin:1px; 10margin-top:7px; 11background-color:#f0e68c; 12} 13 14.button:hover{ 15background-color:#D3EDFB; 16} 17 18.fukidashi{ 19text-align:center; 20background-color:white; 21color:black; 22display:none; 23border-radius:15px; 24border:1px solid #gray; 25margin:2px; 26} 27 28.button:hover .fukidashi{ 29display:block; 30}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。