html - How can I reverse a transition? -
i have made transition change background of navigation elements on hover. when take mouse of element instantly changes 1 had before. change slow initial transition.
here code in html
<ul> <a href="#"><li><i class="home primary-nav-element"></i></li></a><!-- --><a href="#"><li><i class="upload primary-nav-element"></i></li></a><!-- --><a href="#"><li><i class="favs primary-nav-element"></i></li></a><!-- --><a href="#"><li><i class="search primary-nav-element"></i></li></a> </ul>
here current css have:
.primary-nav li:hover .home { background-position: 0 100%; -webkit-transition: background 400ms; -moz-transition: background 400ms; -o-transition: background 400ms; transition: background 400ms; }
put transition on .primary-nav li
, not :hover psuedo element.
.primary-nav li { -webkit-transition: background 400ms; -moz-transition: background 400ms; -o-transition: background 400ms; transition: background 400ms; } .primary-nav li:hover .home { background-position: 0 100%; }
Comments
Post a Comment