Simple HTML5/CSS3 image d'arrière-plan de transition de la souris passe dessus

J'essaie de comprendre le plus simple arrière-plan de transition possible à l'aide de seulement HTML5 et CSS3. La recherche par le biais de stackoverflow, j'ai appris qu'il peut être facilement mis en œuvre à l'aide de bibliothèques externes tels que jQuery mais pour ce projet, j'ai décidé de ne pas s'appuyer sur aucune de celles-ci.

Balisage

<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;
}
Utiliser un Sprite CSS au lieu de cela et de changer l'arrière-plan la valeur de position sur le vol stationnaire pour l'effet de transition.
Merci beaucoup pour le commentaire! Je l'ai considéré comme Sprites CSS, mais qui ne serait pas faire de transition (fade in/out) entre les images, le serait-il? En tout cas, auriez-vous l'esprit en offrant un petit exemple de code dans votre approche?
Les seules transitions que vous pouvez faire sur les images d'arrière-plan pour modifier la position et d'autres propriétés numériques, vous ne pouvez pas les faire fondre dans les uns des autres.
Merci pour la contribution. Auriez-vous l'esprit de poster ce commentaire comme une réponse si j'avais finit par l'accepter?

OriginalL'auteur Nano Taboada | 2011-05-31

  1. 7

    Comme je l'ai mentionné dans mon commentaire, vous ne pouvez pas assurer la transition de la background-image de la propriété, mais vous pouvez obtenir le genre d'effet que vous recherchez si vous êtes prêt à ajouter de balisage et puis la transition de l'opacité. Si vous avez un texte comme ceci:

    <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>

    Ensuite définir la transition sur les images, la position absolue (donc ils vont être comme des arrière-plans), et se cacher l'un d'entre eux par défaut (j'ai laissé de côté les extensions fournisseur pour plus de clarté):

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

    Ensuite permuter les valeurs d'opacité sur li:hover:

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

    Voici un exemple de travail. Pas une solution idéale car vous devez ajouter des balises, mais il va travailler.

    Travaille maintenant dans le Chrome 20
    Tu veux dire que ça ne marchait pas avant?
    Excellent exemple, utilisé avec un couple d'autres CSS de réglages...remplacé une partie du code JavaScript qui était en train de faire cela, le gain de performance est absolument ridicule!!! Les cadres sont allés à partir de 60.00 ms à environ 16/17.00 ms, pas de JS frais généraux =)

    OriginalL'auteur robertc

  2. 2

    Voici un exemple de code que j'utilise pour y parvenir. Les images sont des sprites qui contiennent chacune normal et l'état de pointage. L'astuce consiste à ajouter l'img pour li et une, et à l'utilisation de l'opacité pour modifier l'apparence de l'image. Vous pouvez ensuite utiliser les transitions css3 pour rendre cet aspect plus lisse.

    <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.h a        {background-image: url('img/btn_home.gif');}
#homenav li.i, #homenav li.i a        {background-image: url('img/btn_inloggen.gif');}
#homenav li.v, #homenav li.v a        {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;}
    Merci pour la réponse Mirthe - avez-vous l'esprit la refactorisation de votre code afin de le rendre compatible avec les extraits de code fourni dans la question?

    OriginalL'auteur Mirthe