如何更改 react-bootstrap 导航栏链接的悬停效果？答案

【问题标题】：How to change the hover effect for react-bootstrap navbar link?如何更改 react-bootstrap 导航栏链接的悬停效果？
【发布时间】：2021-02-13 07:28:46
【问题描述】：

我想将悬停效果从白色更改为绿色，但我无法找到确切的 css 代码。

<Navbar fixed='top' collapseOnSelect expand="md" variant="dark" className="animate-navbar nav-theme justify-content-between">
                <Navbar.Brand href="#home" className='logo'>Anis Agwan</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="ml-auto">
                    <Nav.Link href="#home">Home</Nav.Link>
                    <Nav.Link href="#about">About Me</Nav.Link>
                    <Nav.Link href="#timeline">Timeline</Nav.Link>
                    <Nav.Link href="#projects">Projects</Nav.Link>
                    <Nav.Link href="#skills">Skills</Nav.Link>
                    <Nav.Link href="#contact">Contact</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>

这是我的 CSS 部分

.nav-theme {
    background-color: #212121;
    font-size: 20px;
    
}

.animate-navbar {
   box-shadow: 1px 1px 1px hsla(240, 20%, 8%, 0.973);
   animation: moveDown 0.5s ease-in-out;
   
}


.logo {
  color: #64dd17;
}

【问题讨论】：

您要更改哪个元素的颜色？目前，您的代码中没有白色元素。
我正在尝试在导航链接上添加悬停效果。即导航栏上的主页、关于我等
查看更新的示例，这次我使用了您的代码。 - 只需向导航链接添加一个类并更改那里的颜色。

标签： javascript css reactjs react-bootstrap

【解决方案1】：

这里有一些可以提供帮助的 CSS。

.nav-links {
display: inline-block;
height: 20px;
background-color:white;/*will change background-color of element */
color: green; /*will change color of text within the element */
}

.nav-links:hover {
background-color:green; /*will change background-color of element on hover */
color: white; /*will change color of text within the element on hover */
}

<Navbar fixed='top' collapseOnSelect expand="md" variant="dark" class="navbar">
                <Navbar.Brand href="#home" className='logo'>Anis Agwan</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="ml-auto">
                    <Nav.Link class="nav-links" href="#home">Home</Nav.Link>
                    <Nav.Link class="nav-links" href="#about">About Me</Nav.Link>
                    <Nav.Link class="nav-links" href="#timeline">Timeline</Nav.Link>
                    <Nav.Link class="nav-links" href="#projects">Projects</Nav.Link>
                    <Nav.Link class="nav-links" href="#skills">Skills</Nav.Link>
                    <Nav.Link class="nav-links" href="#contact">Contact</Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>

【讨论】：

我想要改变字体颜色而不是背景
我已经更新了我的 sn-p 并添加了 cmets。让我知道这是否有效。
如果这解决了您的问题，请标记为正确（单击复选标记）。谢谢！