Easy HTML5 / CSS3 mouseover

Question

I am trying to understand the simplest background transition using only HTML5 and CSS3 . Search through stackoverflow I found out that it can be easily implemented using external libraries such as jQuery , but for this project I decided not to rely on any of them.

Markup

 <nav> <ul> <li><a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a></li> </ul> </nav> 

Styles

 body { background: url('background-default.png'), no-repeat; } #foobar a:hover { background: url('background-hover.png'), no-repeat; -webkit-transition: // TODO; -moz-transition: // TODO; -o-transition: // TODO; -ms-transition: // TODO; transition: // TODO; } 

Answer 1

As I mentioned in my comment, you cannot move the background-image property, but you can get the effect you are looking for if you want to add additional markup, and then go to opacity. So you will have this markup:

 <nav> <ul> <li> <img src="no-icon.png"> <img src="yes-icon.png"> <a id="foobar" href="http://www.google.com/search?q=foobar">Foobar</a> </li> </ul> </nav> 

Then set the transition on the images, set them to the absolute position (so that they look like backgrounds) and hide one of them by default (clarity did not limit for clarity):

 nav li img { position: absolute; transition-duration: 1.5s; opacity: 1; } nav li img:first-child { opacity: 0; } 

Then replace the opacity values ​​with li:hover :

 nav li:hover img { opacity: 0; } nav li:hover img:first-child { opacity: 1; } 

Here is a complete working example . Not a perfect solution, because you need to add extra markup, but it will work.

Answer 2

Here is an example of the code that I use to achieve this. Images are sprites, each of which contains a normal and freezing state. The trick is to add img to both li and k, and use opacity to change the look of the image. Then you can use css3 transitions to make it smoother.

 <ul id="homenav"> <li class="h"><a href="#><span>Home</span></a></li> <li class="i"><a href="#"><span>Inloggen</span></a></li> <li class="v"><a href="#"><span>Voorbeelden</span></a></li> </ul> #homenav li.h, #homenav li.ha {background-image: url('img/btn_home.gif');} #homenav li.i, #homenav li.ia {background-image: url('img/btn_inloggen.gif');} #homenav li.v, #homenav li.va {background-image: url('img/btn_voorbeelden.jpg');} #homenav li {background-position: 0 170px;} #homenav li a {background-position: 0 0;} #homenav li a:hover {opacity: 0; -webkit-transition: opacity .8s ease-in; -moz-transition: opacity .8s ease-in; -o-transition: opacity .8s ease-in; transition: opacity .8s ease-in;} #homenav a {display: block; height: 100%;} #homenav a span {display: none;}