0

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

我已经尝试了很多方法来让这个 box-shadow 过渡工作，包括：

  • 在声明中切换 hex、rgb 和 rgba 颜色box-shadow。
  • 使用更具体的选择器。
  • 更改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);
}

这里可能发生什么导致它什么都不做？

这是我的网站的链接，以获得上下文体验。它是页面右上角的标题菜单。

4

2 回答 2

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;
}
于 2015-03-28T19:22:40.390 回答
-1

使用过渡：全部；而不是 box-shadow，应该可以解决您的问题

于 2015-03-28T19:20:22.057 回答