阵营引导，添加悬停效果，以NavItems

Question

全新的反应引导和我一直在尝试一些自定义样式添加到组件。

我能够通过使用Chrome检查发现的类名，除去从导航圆角半径，但我一直没能添加悬停效果我NavItems这样做。

这里是我的组件。

<Navbar inverse collapseOnSelect className="nav-bar"> 
    <Navbar.Header> 
     <Navbar.Brand> 
     <a href="#">efrt</a> 
     </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> 

从Chrome检查复制过来，我碰到下面的类/我想要当我尝试以下方法没有任何反应做出改变

.navbar-inverse .navbar-nav>li>a { 
    color: #9d9d9d; 
} 

元素。我尝试添加自定义类名，但没有效果。

.navbar-inverse.navbar-nav>li>a:hover { 
    background: grey; 
} 

任何帮助赞赏:)！

Answer 1

你缺少.navbar-inverse作为.navbar-nav后的空间是一个孩子：

.navbar-inverse .navbar-nav > li > a:hover { 
    background-color: gray; 
} 

运行例如：

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> 
 
       <a href="#">efrt</a> 
 
      </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>