单击菜单按钮会更改阴影 React/CSS

Question

我正在尝试通过使用 CSS 来实现这一点，我正在使用 "react-horizontal-scrolling-menu"，并且在设置菜单项样式时，.menu-item:hover & .menu-item:active 有效好吧，但是 .menu-item:visitedisnt，我尝试了几种方法，但我似乎无法在单击它后控制菜单项，这是代码片段，它在当前 moduleview

上设置

https://codesandbox.io/s/qk1v5n0z5w?fontsize=14&moduleview=1

Answer 1

我发现每当用户单击时，按钮的 box-shadow 会发生变化：

.menu-item:active {
  background: #fafafa;
  transition: all 0.1s ease-out;
  border: 9px solid #fafafa;
  box-shadow: 0 7px 30px #cc0f0fa6;
  color: #cc0f0f4d;
}

但是 .menu-item:visited 没有 CSS。原因是您的按钮不是链接（它们是 <div>）由于安全问题，浏览器限制了可以为 a:visited 链接设置的样式。

允许的样式是：

• 颜色
• 背景色
• 边框颜色（和单独边的边框颜色）
• 轮廓颜色
• 列规则颜色
• 填充和描边的颜色部分

所有其他样式均继承自 a:link。