css - 单击时,我的反应链接将不起作用
问题描述
当我单击链接时,它们将不起作用。但是当我将位置更改为 时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%;
}
解决方案
在这里,我假设您不想li:before
被点击,因此您可以将其添加到 css 中,pointer-events: none
并且它不会再覆盖初始元素。
我没有对此进行测试,但请进行测试并告诉它是否有效。
推荐阅读
- reactjs - React-Leaflet:位置未按时获取
- elasticsearch - 单索引或多索引
- python - 获得更灵活的函数柯里化的 Pythonic 配方
- haskell - 为什么 Haskell 中的这个“@”用法不能包含整个列表?
- python - Groupby 两列熊猫数据框和 shift().rolling()
- python - Python Ctypes NtQueryObject ObjectNameInformation 无异常中断
- python - 使用firebase admin SDK,Flask请求部署超时
- arrays - 使用二维数组作为转换表在 Verilog 中实现状态机
- xcode - 没有为目标提供 SOURCES:MyProject ?(OpenSceneGraph 基础)
- http - 如何加密离线企业网络中的http流量?