搜尋

首頁  >  問答  >  主體

有條件地將className更改為css模組(React)

<p>我正在嘗試在用戶懸停在我的網站導航欄上時播放動畫。我試圖透過根據滑鼠是否懸停在導覽列上來更改css模組來實現這一目標。我正在努力弄清楚為什麼這段程式碼不起作用。非常感謝任何幫助! </p> <p>Navbar.jsx:</p> <pre class="brush:php;toolbar:false;">import React, { useState } from "react"; import { Link } from "react-router-dom"; import styles from "../styles/Navbar.module.css"; const Navbar = () => { const [className, setClassName] = useState("line-after"); return ( <div className="navbar" onMouseEnter={() => setClassName("line::before")} onMouseLeave={() => setClassName("line-after")} > <nav> <Link to="/about" className="home-page"> Bob <br /> Jones </Link> <ul> <li> <Link to="/about" className="about-page"> About </Link> </li> <li> <Link to="/resume" className="resume-page"> Resume </Link> </li> <li> <Link to="/contact" className="contact-page"> Contact </Link> </li> </ul> </nav> <div className={styles.className}></div> </div> ); }; export default Navbar;</pre> <p>Css模組:</p> <pre class="brush:php;toolbar:false;">.line::before { content: ""; position: absolute; top: 0; left: 0; width: 55px; height: 1px; background: black; animation-name: animate; animation-duration: 1s; } .line-after { margin: 40px 40px 40px 40px; width: 55px; height: 1px; background: white; position: relative; } @keyframes animate { 0% { left: 0; } 100% { left: 100%; } }</pre> <p>當滑鼠離開並進入導覽列時,我正在更改className的狀態。然而,它說我的狀態變數className從未被使用過,所以我認為這是問題所在。不確定如何修復它。 </p>
P粉799885311P粉799885311466 天前509

全部回覆(1)我來回復

  • P粉124890778

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

    您可以完全不使用React邏輯來實現這一點,您可以簡單地使用CSS動畫(就像您目前正在做的那樣)和CSS偽類(在這種情況下是:hover),而不是動態地改變元素的類別。

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

    #請檢查這是否對您有用:如何在懸停時播放動畫並在懸停不活動時暫停

    回覆
    0
  • 取消回覆