javascript - React/JS - onMouseOver 改变字体
问题描述
我不熟悉代码和语言或术语,但我希望以一种体面的方式fontStyle1
从 scss 更改为Hover/mouseEnter!fontStyle2
提前致谢。
scss:
fontStyle1{font-family: $Scope-One;}
fontStyle2{font-family: $Rouge-Script;}
js:
function NavBar() {
return (
<div>
<Navbar className="colorNav" collapseOnSelect expand="lg" variant="dark">
<Navbar.Brand id="fontStyle1" href="/">
<img
alt="BrandName"
src= {Logo}
width="30"
height="30"
className="d-inline-block align-top"
/>{' '}
BrandName
</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav"/>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto"/>
<ul className="navbar-nav">
<li><Link to={'/'} className="nav-link"> About </Link></li>
<li><Link to={'/bookmark'} className="nav-link">Bookmark</Link></li>
</ul>
</Navbar.Collapse>
</Navbar>
</div>
);
}
export default NavBar;
解决方案
尝试使用 SCSS 设置悬停样式:
.logo {
font-family: $Scope-One;
&:hover {
font-family: $Rouge-Script;
}
}
JS(已更改id):
...
<Navbar.Brand id="navlogo" className="logo" href="/">
...
推荐阅读
- python - 从 django 中的原始 sql 查询获取关联数组
- javascript - 使用单选按钮在两个样式表之间切换
- c# - 未找到视图“索引”或其主视图。搜索了以下位置
- java - Java 逻辑 AND &&、& 和 XOR OR 之间的优先级 ^
- python - 我需要根据在 Tkinter 中选中的复选框更改日历的状态
- firebase - 如何防止我的可观察订阅为每个发出的值再次运行?
- scala - Gatling:在开始模拟之前尝试检查后端是否已启动
- python-3.x - 如何将 str 转换为浮点数?
- spring - intellij - Spring 应用程序上下文依赖关系图
- generics - 是否可以使用泛型针对不同的特征以不同的方式实现相同的方法?