Javascriptのホバーイベント

Question

前提・実現したいこと

HTMLで、ある要素をホバーした時に、遠くの要素の値を変更したかったのですが、
CSSでは要素が近くにない場合実装できないと分かったので、
インターネットで色々調べてJavaScriptを埋め込んだのですが、一向に効きません。

正確には、「ホーム」というリンクをホバーした時にだけ、「→詳しく」という文字が出てきてほしいです。「→詳しく」のところはCSSでdisplay:none;に設定しています。

該当のソースコード

<div class="header-center">
  <ul>
    <li><a href="#" id="link">ホーム<i class="fas fa-angle-down"></i></a></li>
    ...（中略）
  </ul>
</div>

...（中略）

<div class="hidden">
  <p class="hidden-text" id="target">→詳しく</p>
  <div class="hidden-box">
    ...（中略）
  </div>
</div>

<script>
  var link = document.getElementById('link');
  var target = document.getElementById('target');

    //ON
    link.addEventListener('mouseenter', () => {
      target.style.display = 'block';
    }, false);

    //OUT
    link.addEventListener('mouseleave', () => {
      target.style.display = 'none';
    }, false);
</script>

試したこと

varをconstに変えても同じでした。（javascriptはあまり知識がないので、当たり前のことだったらすみません）

Comments

[soliste16]

十分うまくいっていると思うのですが。少なくともJSは正しいと思います。

[hayato7]

もしかりてhiddenクラスにdisplay noneついてますか？

[SuSSS]

>もしかりてhiddenクラスにdisplay noneついてますか？

ついていました。削除したら効きました。ありがとうございますm(_ _)m

[soliste16]

一応、自己解決にしておいてください。

[退会済みユーザー]

きちんと動いてそうです。
もしかしたらCSSや、ここに書いてるコード以外が影響しているのでは？

Answer 1

hiddenクラスのdisplay:noneを削除したら効きました。ありがとうございました。