プログラミング学習のメモです。
自分でもあとから見返せるようにまとめています。
この記事で説明していること
マウスポインタを対象に乗せたとき→表示させる
マウスポインタが対象から外れたとき→非表示
設置までの概要
- 隠しておく対象をCSS [ display:none; ] を用いて非表示にする
- 対象に新しいclassを追加する（今回は：”text-active”）
- [.text-active]クラスに対して、CSS [ display:block; ] で表示するように指定
- 【jQuery】ポインタが乗ったときに、[.text-active]クラスを与える、外れたときに[.text-active]クラスを外す
- [.text-active]クラスあり→表示 [.text-active]クラスなし→非表示
実際のコード
script.js
$(‘.lesson’).hover(
function() {
$(this).find(‘.text-contents’).addClass(‘text-active’);
},
function() {
$(this).find(‘.text-contents’).removeClass(‘text-active’);
}
);
要注意ポイント
要注意
クラスの付与をする場合、[ $(this).find(〜 ] を用いないと全共通クラスを対象にしてしまう！
[ this ] + [ find ] を用いて、対象のクラス内で適応するよう指示すること！
参考になりましたか？頑張れ未来の自分😄
