【jquery道場コース中級編】　レッスン一覧をつくろう

.text-contentsは非表示にしておく。=display:none;

1 各レッスンのアイコン画像にマウスを乗せる➡  その下にレッスンの説明が出てくるようにする。

$('.lesson').hover(function(){
$(this).find('.text-contents').css('display','inline-block')}

.lessonをホバーすると、.lessonの子孫要素　.text-contentsをdisplay:inline-block;にする

このままだと、ホバー表示されるだけで消えない！

２　マウスを外すと、元のように説明が隠れるようにします。

$('.lesson').hover(function(){
$(this).find('.text-contents').css('display','inline-block')}
//マウスを乗せたときの処理

,function(){
$(this).find('.text-contents').css('display','none')
//マウスを乗せなかった時の処理
});

.lessonをホバーすると、.lessonの子孫要素　.text-contentsをdisplay:none;にする