React/JS - onMouseOver 改变字体
React/JS - onMouseOver Changing the font
我不熟悉代码和语言或术语,但我希望以体面的方式将 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="/">
...
我不熟悉代码和语言或术语,但我希望以体面的方式将 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="/">
...