html - Box-Shadow not carrying out Transition -
i know may dupe, i'm willing take hit feel confident have researched multiple solutions.
i have tried many methods box-shadow transition work, including:
- switching between hex, rgb, , rgba colors in
box-shadow
declaration. - using selectors more specificity.
- changing the
transition
property includeease-in-out
@ end of declaration. - i cleansed css file of
transition
properties possibly effect element. - all while, triple checking spelling mistakes.
the inspector says styles not being overridden. here code:
.site-header .genesis-nav-menu .menu-item { -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 happening here cause nothing?
here link site in context experience. it's header menu in top right corner of page.
try:
.site-header .genesis-nav-menu .menu-item { -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; }
Comments
Post a Comment