Shadow not carrying out Transition

I know this may be a dupe, but I'm willing to take the hit as I feel confident I have researched multiple solutions.

I have tried many methods to get This box-shadow transition to work, including:

Switching between hex, rgb, and rgba colors in the box-shadow declaration.

Using selectors with more specificity.

Changing the the transition property to include ease-in-out at the end of the declaration.

I cleansed the CSS file of any transition properties that could possibly effect the element.

All the while, triple checking my spelling mistakes.

The inspector says my styles are not being overridden. Here is my code:

.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);
}

What could be happening here to cause this to do nothing?

Here is a link to my site for an in context experience. It's the header menu in the top right corner of the page.

---

尝试：

.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;
}

---

Use transition: all; instead of box-shadow, should fix your issue

链接地址: http://www.djcxy.com/p/96212.html

上一篇: CSS v Photoshop Box Shadows：迷失在翻译中

下一篇: 阴影不执行过渡