<p>ユーザーが Web サイトのナビゲーション バーの上にマウスを置いたときにアニメーションを再生しようとしています。マウスがナビゲーションバー上にあるかどうかに基づいて CSS モジュールを変更することでこれを実現しようとしています。このコードが機能しない理由を理解しようとしています。ご協力をよろしくお願いいたします。 </p>
<p>Navbar.jsx:</p>
<pre class="brush:php;toolbar:false;">import React, { useState } from "react";
import { Link } から "react-router-dom";
「../styles/Navbar.module.css」からスタイルをインポートします。
const Navbar = () => {
const [クラス名, setクラス名] = useState("行後");
戻る （
<ナビ>
<「/about」へのリンク<className="ホームページ">
ボブ
<br />
ジョーンズ
</リンク>
- ;
<リンク先: "/about" className="about-page">
について
</リンク>
</li>
- ;
<リンク先="/resume" className="resume-page">
再開する
</リンク>
</li>
- ;
<「/contact」へのリンク className="contact-page">
接触
</リンク>
</li>
</ul>
</ナビ>
<div className={styles.className}></div>
</div>
);
};
デフォルトのナビゲーションバーをエクスポート;</pre>
<p>Css モジュール: </p>
<pre class="brush:php;toolbar:false;">.line::before {
コンテンツ： "";
位置: 絶対;
トップ: 0;
左: 0;
幅: 55ピクセル;
高さ: 1px;
背景: 黒;
アニメーション名: アニメート;
アニメーション期間: 1 秒。
}
.line-after {
マージン: 40 ピクセル 40 ピクセル 40 ピクセル 40 ピクセル;
幅: 55ピクセル;
高さ: 1px;
背景: 白;
位置: 相対的;
}
@keyframes アニメーション化 {
0% {
左: 0;
}
100% {
左: 100%。
}
}</pre>
<p>マウスがナビゲーション バーから離れてナビゲーション バーに入ったときの className の状態を変更しています。ただし、状態変数 className は決して使用されないと書かれているので、それが問題だと思います。修正方法がわかりません。 </p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これは、React ロジックをまったく使用せずに実現できます。要素のクラスを手動で動的に変更する代わりに、(現在行っているように) CSS アニメーションと CSS 疑似クラス (この場合は :hover) を使用するだけです。
https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
これが機能するかどうかを確認してください: ホバー時にアニメーションを再生し、非アクティブなホバー時に一時停止する方法