0

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.

ExcellentSP
  • 1,529
  • 4
  • 15
  • 39

2 Answers2

1

Try:

.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;
}
Indy
  • 4,838
  • 7
  • 24
  • 35
-1

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

Slugge
  • 180
  • 1
  • 11