css - 在导航项（引导导航）上执行自定义悬停动画，但效果在我的反应应用程序中不可见

问题描述

我正在尝试使用 ext CSS 在我的导航项上添加自定义悬停效果，但是当我将其导入导航栏中时，引导程序不会被覆盖并且效果不可见，并且当导航栏折叠时，三行也不可见但是当我点击右上角时它就在那里并且工作正常

这是我用于反应的 NAVBAR.JS 文件

import React, { Component } from 'react';
import { Navbar, Nav, Button } from 'react-bootstrap';
import styles from './Navbar.css';

import 'bootstrap/dist/css/bootstrap.min.css';
import { Link } from 'react-router-dom';

const links = [
  {
    href: '/novels/601e73a75e4fd540506c9938',
    text: 'Novel',
  },
  { href: '#', text: 'Buy EA Coins' },
  { href: '#', text: 'Get Started' },
  { href: '#', text: 'Library' },
  { href: '/', text: 'home' },
];

const createNavItem = ({ href, text, className }) => (
  <Nav.Item>
    <Nav.Link className={className}>
      <Link to={href}> {text}</Link>
    </Nav.Link>
  </Nav.Item>
);

class NavbarMain extends Component {
  constructor(props) {
    super(props);
    this.state = {
      key: 'home',
    };
    this.handleSelect = this.handleSelect.bind(this);
  }

  handleSelect(key) {
    this.setState({
      key: key,
    });
    alert(`selected ${key}`);
  }

  render() {
    return (
      <Navbar
        bg="light"
        variant="danger"
        expand="lg"
        fixed-top
        className={styles.test}
      >
    <Navbar bg="light">
      <Navbar.Brand>
            <Link to="/" exact>
              <img
                src="EA-Logo-edit.png"
                width="90"
                height="70"
                margin="none"
                className="d-inline-block align-top"
                alt="React Bootstrap logo"
                style={{ margin: 'none' }}
              />
            </Link>
          </Navbar.Brand>
        </Navbar>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="mr-auto" activeKey="/" className={styles.avbar}>
            {links.map(createNavItem)}
          </Nav>

          <Nav className="ml-auto" navbar>
            <Nav.Item>
              <Nav.Link href="#discord">
                <Button variant="outline-dark">
                  <img height={25} width={40} src="discord.svg" alt="" />
                  Discord
                </Button>
              </Nav.Link>
            </Nav.Item>
            <Nav.Item>
              <Nav.Link href="/auth/login">
                <Button variant="outline-dark">
                  <img height={25} width={40} src="google.svg" alt="" />
                  Login
                </Button>
              </Nav.Link>
            </Nav.Item>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default NavbarMain;

这是我的 CSS 文件

:local(.navbar.hover::before){
position: relative;
}

:local(.navbar:before){
    content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.3s ease-in-out 0s;
}

:local(.navbar:hover){
    color: #000;
}

:local(.navbar){
    position: relative;
    color: #000;
    text-decoration: none;
}

标签： cssreactjsbootstrap-4react-bootstrap

css - 在导航项（引导导航）上执行自定义悬停动画，但效果在我的反应应用程序中不可见

问题描述

解决方案

推荐阅读