i要素にホバーすると対応するｐ要素がふわっと浮き出てくる仕組みが作れない

Question

前提・実現したいこと

アイコンにホバーすると対応するテキストがふわっと浮き出てくる仕組み

該当のソースコード

     <div class="coding skill">
      <i class="fas fa-code" id="coding"></i>
      <p id="coding-content">デザイン通りに正確にコーディングすることはもち 
      ろんのこと、レスポンシブなWEBサイトを作ることにより、スマートフォン、PC 
      どちらからでも見やすいWEBサイトを制作することができます。</p>
     </div>
     <div class="direction skill">
      <i class="far fa-question-circle" id="direction"></i>
      <p id="direction-content">WEBサイトを作るうえで、ターゲットやそのお 
      利用状況を具体的に定め、目的を明確にすることは何より大切です。丁寧なヒ 
      アリング調査により依頼者様のご希望を実現いたします。</p>
    </div>
    <div class="design skill">
      <i class="fas fa-paint-brush" id="design"></i>
      <p id="design-content">依頼者様の想定されているターゲットや、利用状況 
      によって最適な配色、配置のWEBサイトを制作いたします。</p>
    </div>

.skill p{
  opacity:0;
  transition:0.6s;
}
.skill p.active{
  opacity:1;
  transform:translate(0,-20px);
}

const coding = document.getElementById('coding');
const direction = document.getElementById('direction');
const design = document.getElementById('design');

const icons = [
  coding,
  direction,
  design,
];

for(let i=0;i++;i<icons.length){
  icons[i].addEventListener('mouseover',()=>{
    document.getElementById(`$(icons[i])-content`).classList.add('active');
  });
};

補足情報（FW/ツールのバージョンなど）

エラーなどは表示されなかったです

Comments

[kei344]

「作れない」とは「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。

[takuma1217]

ご指摘ありがとうございます。htmlのi要素にmouseoverしたときに、それぞれ対応するテキスト（同じ領域内のp要素）がふわっと出てくるような仕組みを作りたいと考えておりました。
そのために、i要素にmouseoverしたときにp要素にactiveクラスをつけ、ｃｓｓでactiveクラスのついているp要素がopacityが１になって、上に20ピクセル動くように記述しました。しかし実際はマウスホバーしてもオパシティが０のままでテキストが表示されませんでした。

Answer 1

forの設定値の順番が違うと思います。

下記のようにしてみると分かりますが、

for(let i=0;i++;i<icons.length){
  console.log(icons[i]);

何も出力されません。

初期値;ループを繰り返す条件;カウンタです。

for(let i=0;i<icons.length;i++){
console.log(icons[i]);

下記、何がしたいのか今ひとつわかりません

document.getElementById(`$(icons[i])-content`)

jQueryと混在させようとしているのでしょうか？
getElementById()に与える引数はあくまでidの名称なので、もし、**-contentと名前を付けたいのでしたら、IDを取得してくる必要があります。

    document.getElementById(icons[i].getAttribute('id')+'-content').classList.add('active');

ただ、これって配列で持つ必要ないようにも思います。
div.skill配下のiとpって決まってますので、例えば下記のようにも組めます。

let skillList= document.getElementsByClassName('skill');

for(let i=0;i<skillList.length;i++){
    let title = skillList[i].getElementsByTagName('i');
    let content = skillList[i].getElementsByTagName('p');
    title[0].addEventListener('mouseover',()=>{
        content[0].classList.add('active');
    });
}

Comments

[takuma1217]

javascriptにあまり慣れていなくて初歩的な部分があいまいなまま質問してしまってすみません！丁寧なご指摘ありがとうございます！何がしたいのかいまひとつわからないとおっしゃった部分は、activeクラスをつける要素をテンプレートリテラルで取得しようと試みていました！そうなると（）→｛｝を使うべきなのは気づいたのですが、自分なりに試行錯誤してみたのですが動かず、理由もわかりません、、。良ければ教えていただいてよろしいでしょか？？

[m.ts10806]

テンプレートリテラルを無理に使わなくてもいいのですけど・・・
私自身あまり使いませんが、こうですかね。

document.getElementById(`${icons[i].getAttribute('id')}-content`).classList.add('active');

やはり変数部分と文字列部分をわけて+で連結したほうが見やすいとは思います。

[takuma1217]

ありがとうございます！IDをきちんと取得できていなかったのが問題だったんですね、、
ほんと何度も質問してしまって申し訳ないのですが、先程伝えていただいた配列を組まないタイプのコードについてわからない部分がありました。
title[0]をmouseoverしたときに、content[0]にactiveクラスを付与するという部分なのですが、このコードだと配列の0番目に対してしかイベントを適応できないと思っていました。コードを実装してみるとイメージ通り完璧に動くのですが、理解はできていない状況です、、、。

[m.ts10806]

ごめんなさい。コメント気づきませんでした。
>IDをきちんと取得できていなかったのが問題だった

というより、例えjQueryでも$(icons[i])だけの記述だと要素そのものを指すのでIDにはなり得ない、というべきでしょうか。
結局のところ配列で保持しているのはgetElementById()の結果の要素なので。

>このコードだと配列の0番目に対してしかイベントを適応できないと思っていました
getElementsByTagName() はHTMLCollectionを返します。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName

それにdocument.ではなくskillList[i].でとりに行っているので、それぞれの配下のみ取得しているということになっています。
HTMLCollectionなので例え1件しか対象がなくても配列で取得されます
（getElement"s" ですから）
で、1件しかないと分かっているので[0]番目固定で取得しに行けるわけです。

[takuma1217]

なるほどすっきり理解できました！！
ありがとうございます！