Question

我知道这可能是一个骗局，但我愿意接受这一打击，因为我有信心我已经研究过多种解决方案。

我尝试过很多方法让这个盒子阴影过渡起作用，包括：

在box-shadow声明中切换hex，rgb和rgba颜色。
使用更具特异性的选择器。
在声明结尾处更改transition属性以包含ease-in-out。
我清理了可能影响该元素的任何transition属性的CSS文件。
一直在检查我的拼写错误。

检查员说我的风格没有被覆盖。这是我的代码：

.site-header .genesis-nav-menu .menu-item a {
  -webkit-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
  -moz-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
  -o-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
  box-shadow: 3px 3px 14px rgb(0,0,0) inset;
  -webkit-transition: box-shadow 3s;
  -moz-transition: box-shadow 3s;
  -o-transition: box-shadow 3s;
  transition: box-shadow 3s;
}

.site-header .genesis-nav-menu .menu-item a:hover{
  -webkit-box-shadow: 3px 3px 14px rgb(0,0,0);
  -moz-box-shadow: 3px 3px 14px rgb(0,0,0);
  -o-box-shadow: 3px 3px 14px rgb(0,0,0);
  box-shadow: 3px 3px 14px rgb(0,0,0);
}

这可能会导致什么都不做？

Here is a link to my site了解上下文体验。它是页面右上角的标题菜单。

Answer 1

尝试：

.site-header .genesis-nav-menu .menu-item a {
  -webkit-box-shadow: 0 0 0 rgba(0,0,0,0), 3px 3px 14px rgb(0,0,0) inset;
  transition: box-shadow 3s;
}

.site-header .genesis-nav-menu .menu-item a:hover {
  box-shadow: 3px 3px 14px rgb(0,0,0), 0 0 0 rgba(0,0,0, 0) inset;
}

Answer 2

使用过渡：全部;应该修复你的问题而不是盒子阴影

Box-Shadow没有进行过渡

2 个答案: