React Bootstrap, Adding Hover Effects to NavItems - css

Question

Brand new to React Bootstrap and I have been trying to add some custom styling to components.
I was able to remove the border radius from the Nav by using chrome inspector to find the classname, but I haven't been able to do the same for adding hover effects to my NavItems.
Here is my component.
<Navbar inverse collapseOnSelect className="nav-bar">
<Navbar.Header>
<Navbar.Brand>
efrt
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">Features</NavItem>
<NavItem eventKey={2} href="#">Who we Are</NavItem>
</Nav>
<Navbar.Form pullRight>
<UniversalButton style="primary" name='Login' />
</Navbar.Form>
<Nav pullRight>
<NavDropdown eventKey={3} title="Signup" id="basic-nav-dropdown">
<MenuItem eventKey={3.3}>Member</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.3}>Coach</MenuItem>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
Copied over from Chrome inspector, I get the following as the class/elements where I want to make changes
.navbar-inverse .navbar-nav>li>a {
color: #9d9d9d;
}
When I try the following nothing happens. I tried adding custom class names with no effect either.
.navbar-inverse.navbar-nav>li>a:hover {
background: grey;
}
Any help appreciated :)!

Answer 1

You are missing a space after .navbar-inverse as .navbar-nav is a child:
.navbar-inverse .navbar-nav > li > a:hover {
background-color: gray;
}
Running example:
const { Navbar, Nav, NavItem, NavDropdown, MenuItem } = ReactBootstrap;
class App extends React.Component {
render() {
return (
<div>
<Navbar inverse collapseOnSelect className="nav-bar">
<Navbar.Header>
<Navbar.Brand>
efrt
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">
Features
</NavItem>
<NavItem eventKey={2} href="#">
Who we Are
</NavItem>
</Nav>
<Navbar.Form pullRight />
<Nav pullRight>
<NavDropdown eventKey={3} title="Signup" id="basic-nav-dropdown">
<MenuItem eventKey={3.3}>Member</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.3}>Coach</MenuItem>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Navbar>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.31.3/react-bootstrap.min.js"></script>
<style>
.navbar-inverse .navbar-nav>li>a:hover {
background-color: green;
}
</style>
<div id="root"></div>