Although this question may have been asked before, I am confident that I have thoroughly researched and attempted multiple solutions.
I have experimented with various methods to make this box-shadow transition work, such as:
- Switching between hex, rgb, and rgba colors in the
box-shadowdeclaration. - Improving specificity by using selectors.
- Adding
ease-in-outto thetransitionproperty at the end of the declaration. - Removed any potentially conflicting
transitionproperties from the CSS file. - Carefully checking for any spelling errors.
The inspector indicates that my styles are not being overridden. Here is the code snippet:
.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);
}
Why could it be that nothing is happening despite following these steps?
Visit my site for a live demonstration. You can find the header menu in the top right corner of the page.