陣營引導，添加懸停效果，以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>