jQuery

jQuery:間違えた問題(hoverイベント)

jQuery:間違えた問題(hoverイベント)

誤解答
$('.lesson-icon').hover(
 function(){
  $(this).find('.text-contents').fadeIn();
 },
 function(){
  $(this).find('.text-contents').fadeOut();
 });
});

アイコンにマウスをhoverしたとき、
対応する文章を表示したくて、lesson-iconにhoverイベントを設定したが、
class指定しているtext-contentsは、html内でlesson-iconを親要素としておらず
$(this).find('.text-contents')でtext-contentsを見つけられなかった。
そのため、プログラムが上手く動かなかった。
この時のhtmlは以下の通り。

<div class="lesson">
 <div class="lesson-icon" >
 <img src="#">
 <p> HTML & CSS </p>
 </div>
 <p class="text-contents">ウェブページの作成に使用される言語です。</p>
</div>
 
lesson-iconを親要素としているのはimgタグとpタグの部分のみ。
該当する、text-contents部分はlessonクラスを親要素としているので、
hoverイベントはlessonに対して行い、lessonからtext-contentの部分を探すようにすると動く。

正しい解答
$('.lesson').hover(
 function(){
  $(this).find('.text-contents').fadeIn();
 },
 function(){
  $(this).find('.text-contents').fadeOut();
 });
}); 

コメントを残す

メールアドレスが公開されることはありません。