简体   繁体   English

NavLink react-router-dom 组件:悬停不起作用

[英]NavLink react-router-dom components :hover not working

The hover does not work on react router components.悬停对反应路由器组件不起作用。 Image图片

JSX inline style attributes does not allow :hover . JSX 内联样式属性不允许:hover You need to put that in your stylesheet instead.你需要把它放在你的样式表中。

You can't and even shouldn't put pseudo-classes inline.你不能,甚至不应该把伪类内联。 Put css in class and then apply it by className like in example below:将 css 放在 class 中,然后按className应用它,如下例所示:

JSX: JSX:

<NavLink to="/example" className="nav_link">Example</NavLink>

CSS CSS

.nav {
  //other styles
  //...
  a.nav_link:hover {
  cursor: pointer;
  color: red; 
  }
}

Example例子

I prefer the CSS-in-JS method to set the class like so:我更喜欢 CSS-in-JS 方法来设置类,如下所示:

nav_link: {
  textDecoration: 'none',
  '&:hover': {
    textDecoration: 'none'
  }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM