React / JS - onMouseOver Изменение шрифта - PullRequest
Новая
       33

React / JS - onMouseOver Изменение шрифта

0 голосов
/ 29 января 2020

Я не знаком с кодом и языками или терминологией, но мне нужно sh изменить fontStyle1 с s css на fontStyle2 на Hover / mouseEnter достойным образом!

Спасибо заранее.

с css: 

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;

1 Ответ

1 голос
/ 29 января 2020

Попробуйте установить стиль наведения с помощью S CSS: 

.logo {
  font-family: $Scope-One;

  &:hover {
    font-family: $Rouge-Script;
  }
}

JS (изменили идентификатор): 

...
<Navbar.Brand id="navlogo" className="logo" href="/">
...
...