条件付きでclassNameをcssモジュールに変更（React）

Question

<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>

1

0

0

P粉799885311

返事

全員に返信(1)

返信します 近い

P粉1248907782023-08-18 10:25:38 1棟

これは、React ロジックをまったく使用せずに実現できます。要素のクラスを手動で動的に変更する代わりに、(現在行っているように) CSS アニメーションと CSS 疑似クラス (この場合は :hover) を使用するだけです。

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

これが機能するかどうかを確認してください: ホバー時にアニメーションを再生し、非アクティブなホバー時に一時停止する方法

いいねを押す +0

返信を追加 关闭回复

P粉799885311

返事

Answer 1

これは、React ロジックをまったく使用せずに実現できます。要素のクラスを手動で動的に変更する代わりに、(現在行っているように) CSS アニメーションと CSS 疑似クラス (この場合は :hover) を使用するだけです。

https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

これが機能するかどうかを確認してください: ホバー時にアニメーションを再生し、非アクティブなホバー時に一時停止する方法