单击时，我的反应链接将不起作用

Question

当我单击链接时，它们将不起作用。但是当我将ul.pullRight li:before 中的位置更改为relative 时，样式消失并且链接有效。链接中有悬停效果。

这是我的导航栏组件

 import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'


const Navbar = ({ icon, title }) => {

    return (
        <nav className='navbar bg-primary'>
            <h1 style={{ fontWeight: 'bold', fontSize: '35px', color: 'whitesmoke'}}><i className={icon}></i>{title}</h1>
            <ul className='container pullRight'>
                {/* LINK to is used in place of <a> tag */}
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/login">Login</Link></li>
                <li><Link to="/logout">LogOut</Link></li>
            </ul>
        </nav>
    )
}

这是css文件

/* Pull right  */
ul.container li
{
    color: #FFF;
    text-decoration: none;
    font: 15px Raleway;
    margin: 0px 10px;
    padding: 10px 10px;
    position: relative;
    z-index: 0;
    cursor: pointer;
}

ul.pullRight li:before
{
    position: absolute;
    width: 2px;
    height: 100%;
    left: 0px;
    top: 0px;
    content: '';
    background: #FFF;
    opacity: 0.3;
    transition: all 0.3s;
}

ul.pullRight li:hover:before
{
    width: 100%;
}

Answer 1

这里我假设您不想点击 li:before，因此您可以将其添加到 css，pointer-events: none，它不会再覆盖初始元素。

我没有对此进行测试，但请进行测试并告诉它是否有效。