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

Question

我正在尝试通过使用CSS来实现这一目标，我正在使用" react-horizontal-scrollring-menu"，并且当我对Menuitems进行样式时，.menu-item：Menu-item：Hover＆amp;。menu-item:active运行良好，但是.menu-item：访问，我尝试了几种方法，但我似乎无法控制Menuitem，这是该代码的摘要，它在当前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;
}

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

允许样式是：

• 颜色
• 背景色
• 边界色（和单独侧面的边框色）
• 轮廓颜色
• 列柱色
• 填充和中风的颜色部分

所有其他样式均继承为：链接。