hover機能の使い方
hoverはカーソルがセレクタに乗った時の処理と外れた時の処理を記述する。
第一引数にカーソルが乗った時の処理をかき、第二引数にカーソルが外れた時の処理をかく
hoverと一緒にaddClassとremoveClassを使う時の流れ
hover時にtext-activeというclassがあれば、レッスンの説明文を表示させる
①cssで.text-active{display: block}を指定
②マウスが乗った時に説明文にtext-activeクラスをつける（説明文表示）
③マウスがはずれたときにtext-activeクラスを外す(説明文を非表示にする)
addClassメソッド
指定した要素にクラスを追加することができます。
text-contentsクラスのついた要素に、text-activeというクラスを追加しています。
removeClass
指定した要素から指定したクラスを取り除くことができます。
text-contentsクラスのついた要素から、text-activeというクラスを取り除いています。
コード
CSSファイル
非表示にさせるdisplay:noneと表示させるためのdiplay:blockを記述する
.text-contents {
margin: 3% auto;
width: 80%;
display: none;
font-size: 12px;
color: #b3aeb5;
}
.text-active{
display: block;
}
JS
①lesson-hoverの子孫要素に.text-contents”があれば、text-activeというクラスを加えることでtext-contentのdisplay:noneを消してdisplay:blockで表示させている
②逆にhoverが外れたときはremoveClass(“text-active”）でlesson-hoverクラスからtext-activeを消すことでdisplay:noneを復活させている
$('.lesson-hover').hover(
function() {
$(this).find(".text-contents").addClass("text-active")
},
function() {
$(this).find(".text-contents").removeClass("text-active")
}
);
});