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

Popular posts from this blog

javascript - how to protect a flash video from refresh? -

android - Associate same looper with different threads -

visual studio 2010 - Connect to informix database windows form application -