実現したいこと
ホバー時にdisplay:none/blockを切り替えて要素を表示/非表示にしたいです。
js欄に記載したコードで実現したのですが、動きがカクカクになってしまうので動きをつけたいです。
(よくQ&Aのレイアウトであるような動きです。)
opacityなどを使う方法もあるようですが、自分で調べても実現には至りませんでした。
様々な方法があると思いますが、最初はdisplay:noneを保ちたいです。
ホバーによって、表示された要素分の高さが追加(伸びる)されるようなレイアウトを実現させたいです。
発生している問題・分からないこと
記載するべきjsコードがわからない。
該当のソースコード
HTML
1<div class="question-container"> 2 3 <div class="question-box"> 4 <p class="question-box_query">好きな色は?</p> 5 <p class="question-box_answer">赤色</p> 6 </div> 7 8 <div class="question-box"> 9 <p class="question-box_query">好きな果物は?</p> 10 <p class="question-box_answer">りんご</p> 11 </div> 12 13 <div class="question-box"> 14 <p class="question-box_query">出身は?</p> 15 <p class="question-box_answer">日本</p> 16 </div> 17 18</div> 19
javascript
1$(document).ready(function() { 2 $('.question-box').hover( 3 function() { 4 $(this).find('.question-box_answer').css('display', 'block'); 5 }, 6 function() { 7 $(this).find('.question-box_answer').css('display', 'none'); 8 } 9 ); 10}); 11
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
調べて実行しましたが実現できませんでした。
補足
特になし
![guest](/img/icon/icnUserSample.jpg)