有条件地将className更改为css模块(React)
P粉799885311
P粉799885311 2023-08-17 18:10:17
[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 = () =&gt; { const [className, setClassName] = useState("line-after"); return ( &lt;div className="navbar" onMouseEnter={() =&gt; setClassName("line::before")} onMouseLeave={() =&gt; setClassName("line-after")} &gt; &lt;nav&gt; &lt;Link to="/about" className="home-page"&gt; Bob &lt;br /&gt; Jones &lt;/Link&gt; &lt;ul&gt; &lt;li&gt; &lt;Link to="/about" className="about-page"&gt; About &lt;/Link&gt; &lt;/li&gt; &lt;li&gt; &lt;Link to="/resume" className="resume-page"&gt; Resume &lt;/Link&gt; &lt;/li&gt; &lt;li&gt; &lt;Link to="/contact" className="contact-page"&gt; Contact &lt;/Link&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;div className={styles.className}&gt;&lt;/div&gt; &lt;/div&gt; ); }; 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粉799885311
P粉799885311

全部回复(1)
P粉124890778

您可以完全不使用React逻辑来实现这一点,您可以简单地使用CSS动画(就像您目前正在做的那样)和CSS伪类(在这种情况下是:hover),而不是动态地改变元素的类。

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

请检查这是否对您有用:如何在悬停时播放动画并在悬停不活动时暂停

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号