30DAYSトライアル お勉強

【デイトラ】【Progate】HTML & CSS JQuery中級道場編終了【30DAYSトライアル】

30DAYSトライアル

問題数自体は少なかったですが、結構悩んでしまいました。

そしてここに来てやっとfindを使う意味がすとん!と腑におちた!
これぞアハ体験?(笑)

<div class="contents">
  <img src=#>
</div>
<p class="text">文字表示</p>
$('.contents').hover(
    function(){
      $('.text').fadeIn();
    },
    function(){
      $('.text').fadeOut();
    }
  );

最初上記のようにコーディングしていたんですけど、アイコン画像全部で4つあって、共通のクラス名なんですね。
このままだと1個の画像にマウス乗せると4つの画像全部反応して文字が表示されてしまう!
指定した画像にだけ反応させたいので正しくはこう↓

$('.contents').hover(
  function() {
    // マウスをのせたとき
    $(this).find('.text').addClass('text-active');
  },
  function() {
  // マウスが外れたとき
    $(this).find('.text').removeClass('text-active');
  }

あとdisplay: block;をdisplay: none;より上に書いてしまっていてうまく動作しなかったというミスもしてしまいました。。

あと2章のコードが合ってるかどうかの判定がすごくシビアでした笑
『カーソルを1秒アイコンの上に乗せてから離してください』っていうの5回ぐらいやり直し食らった笑
画面の仕様のせいか判定しようとして画面が勝手にカクカク動くから「お前が動いとるからや」とツッコミ入れてしまうレベル。

-30DAYSトライアル, お勉強
-

© 2021 文系女子とプログラミング