反应中的悬停效果

【问题标题】：Hover Effect in react反应中的悬停效果
【发布时间】：2020-05-12 21:14:45
【问题描述】：

我想更改悬停在导航栏上的链接的样式，例如文本颜色背景，如何在 React 中做到这一点。已附上代码 enter image description here

  render(){
    return(
      <div className="container-fluid">
      <Navbar light expand="md">
        <NavbarBrand href="/"><img src="assets/Yuvaa_Logo.png"></img></NavbarBrand>
        <NavbarToggler onClick={this.toggle} />
        <Collapse isOpen={this.state.isOpen} navbar>
          <Nav  navbar>
            <NavItem>
              <NavLink href="#"><span style={{fontWeight:"bold", color:"black"}}>Home</span></NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="#"><span style={{fontWeight:"bold", color:"black"}}>About US</span></NavLink>

            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
      </div>

    );
  }
}

export default Header;

【问题讨论】：

标签： reactjs react-redux

【解决方案1】：

您可以将鼠标悬停在 React 中，这与在 JS 中的操作方式类似。最简单的方法是你的 css 样式，无论是单独的文件还是像 styled-components 这样的 react 样式包：

.given-class:hover {
 color: red;
}

如果需要，您也可以使用 javascript 来定位它：

document.getElementById("link-id").onmouseover = function(){
   this.style.backgroundColor = "blue";
}

一种更“反应”但相当先进的方法是利用 useref() 挂钩来定位特定链接。但这未免太过分了。

除非您需要非常具体的功能，否则最好的选择是使用第一个选项并定位您的 css 中的元素。

【讨论】：