React Bootstrap，为 NavItems 添加悬停效果

Posted 2023-02-22

【中文标题】React Bootstrap，为 NavItems 添加悬停效果

【英文标题】：React Bootstrap, Adding Hover Effects to NavItems

【发布时间】：2018-03-29 08:19:03

【问题描述】：

React Bootstrap 的新手，我一直在尝试为组件添加一些自定义样式。

通过使用 chrome 检查器查找类名，我能够从导航中删除边框半径，但我无法为我的导航项添加悬停效果。

这是我的组件。

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

任何帮助表示赞赏:)！

【问题讨论】：

您能以任何方式显示您的代码吗？适当地 ？通过托管在某些服务器或其他东西上..??

【参考方案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>

【讨论】：

太棒了，我让它工作了。但是，我想知道如果我把它放在我的 rails stylesheets 文件夹中为什么它没有更新。这些更改只有在我将样式标记添加到根视图时才会发生。

你检查文件加载的顺序了吗？也许您在bootstrap.css 之前加载了您的自定义css，这将使引导程序覆盖您的规则。或者，也许您正在使用类似 css-modules 或其他 css 加载器来更改您的 css 类（例如向它们添加哈希），并且基本上您并没有真正覆盖引导程序的类。