突出显示映射项中的列表项

Question

我试图在 li 元素悬停时突出显示它，并在单击它时保持它的颜色。我只能像这样通过 CSS 做到这一点：

.Side-menu-link:active {
  text-decoration: none;
  color: #27B872;
}

但它只做图标而不是整个 li 正方形。

这是父组件：

export default class Nav extends Component {
  render() {
    return (
      <div className='Side-bar'>
        <ul className='Side-menu'>
          <NavItems />
        </ul>
      </div>
    );
  }
}

这是我的带有 li 元素的子组件：

const topNavItems = [
  {
    route: '/shoppingCart',
    name: 'shop',
  },
  {
    route: '/admin',
    name: 'key',
  },
];

export default class NavItems extends Component {
  render() {
    return (
      <div>
        {
          topNavItems.map((tn) => {
            return (
              <li key={tn.name}><NavLink className='Side-menu-link' to={tn.route}><Icon name={tn.name} /></NavLink></li> //eslint-disable-line
            );
          })
        }
      </div>
    );
  }
}

Answer 1

添加了以下 CSS 来解决此问题

li.link-wrapper > a.selected{
  background-color: #27B872;
  display: block;
}