progateのjQueryの道場で、.lessonにマウスをのせている時だけ.text-contentsを表示させる問題から質問です。
模範解答では一番下にコードを載せましたが、.text-contentsをdisplay:noneにして新たに設定したtext-activeクラスをdisplay:blockとしておき、scriptでhover時に対象の.text-contentsに.text-activeを追加する事で表示・非表示を切り替えています。
ここで疑問なのですがこの問題の場合、追加のクラスなどは設定せず
script
$('.lesson').hover( function() { $(this).find('.text-contents').fadeIN(); }, function() { $(this).find('.text-contents').fadeOut(); } );
のようにマウスを載せた時に、最初からfadeIn・fadeOutさせればいいのではないかと思いましたが、マウスをのせてもテキストが表示されず、上手くいきません。
模範解答の方法を使えば上手くいくことは理解しているのですが、この方法ではどこが問題なのか気になっていますので、教えていただけると幸いです。
html
<div class="lesson-wrapper"> <div class="container"> <div class="heading"> <h2>Learn Where to Get Started!</h2> </div> <div class="lessons"> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/html.png"> <p>HTML & CSS</p> </div> <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/jQuery.png"> <p>jQuery</p> </div> <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax(エイジャックス)を使って外部ファイルを読み込んだりと色々なことができます。</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/ruby.png"> <p>Ruby</p> </div> <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/php.png"> <p>PHP</p> </div> <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> </div> </div> </div> </div>
css
.text-contents { margin: 3% auto; width: 80%; font-size: 12px; color: #b3aeb5; display: none; } .text-active { display: block; }
script
$('.lesson').hover( function() { $(this).find('.text-contents').addClass('text-active'); }, function() { $(this).find('.text-contents').removeClass('text-active'); } );
まだ回答がついていません
会員登録して回答してみよう