React Bootstrap、NavItemsにホバー効果を追加する

Question

React Bootstrapに真新しく、コンポーネントにカスタムスタイリングを追加しようとしています。

クロムインスペクタを使用してNavからボーダ半径を削除してクラス名を見つけることができましたが、Navitemにホバー効果を追加するために同じ操作を行うことができませんでした。

ここは私のコンポーネントです。クロームインスペクタからコピー

<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> 

、私は以下の何も起こりませんしようとすると、変更

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

を作りたいクラス/要素として、以下を得ます。私は効果のないカスタムクラス名を追加しようとしました。

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

ありがとうございました:)！あなたは.navbar-navとして.navbar-inverseの後にスペースが不足している

Answer 1

が子供である：

例を実行

.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>