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

Question

我试图通过使用CSS实现这一点，我正在使用“react-horizo​​ntal-scrolling-menu”，并且因为我正在设置菜单项，.menu-item：hover＆.menu-item:active运行良好但是.menu-item：visitedisnt，我尝试了几种方法，但我似乎无法控制菜单项后点击它，这里是代码的片段，它在当前模块视图上设置

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没有CSS：访问过。原因是你的按钮不是链接（它们是<div>）由于安全问题，浏览器限制了可以为a:visited链接设置的样式。

允许的样式是：

• 颜色
• 背景颜色
• 边框颜色（和不同边的边框颜色）
• 轮廓颜色
• 列治色
• 填充和描边的颜色部分

所有其他样式都继承自：link。