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

时间:2019-02-26 07:03:35

标签: javascript css reactjs styles menuitem

我正在尝试使用CSS来实现这一点,我正在使用“ react-horizo​​ntal-scrolling-menu”,并且在设置菜单项的样式时,.menu-item:hover和。menu-item:active效果很好,但是.menu-item:visitedisnt,我尝试了几种方法,但单击后似乎无法控制menuitem,这是代码段,其代码位于当前moduleview上

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

1 个答案:

答案 0 :(得分:0)

我发现,只要用户单击,按钮的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。