[英]React-router/CSS no hover-style if link is active
I have setup styled navigation with react-router v4. 我已经使用react-router v4设置了样式导航。 With this code changing style based on hover and active works.
通过此代码,可以基于悬停和活动作品来更改样式。 However I do want to disable the hover style if I hover over an (react-router) active link.
但是,如果我将鼠标悬停在(反应路由器)活动链接上,我确实想禁用悬停样式。 How can I achieve this?
我该如何实现?
This is my current code: 这是我当前的代码:
<div className="App-navbar">
<NavLink className="inactive" activeClassName="activeLink" exact to="/">
Home
</NavLink>
<NavLink className="inactive" activeClassName="activeLink" to="/about-us">
About
</NavLink>
</div>
.App-navbar > a { display: inline-block; color: rgb(54, 127, 175); } .App-navbar > .inactive { text-decoration: none; font-size: 20px; } .App-navbar > .activeLink { color: rgb(0, 0, 0); background-color: rgba(54, 129, 175, 1); border-radius: 2px; } .App-navbar > a:hover { background-color: rgba(54, 129, 175, 0.2); }
Try this: 尝试这个:
.App-navbar > a:not(.activeLink):hover {
background-color: rgba(54, 129, 175, 0.2);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.