鼠标悬停时的简单 HTML5/CSS3 背景图像过渡

Question

我试图了解最简单的背景转换可能仅 HTML5和CSS3 >。通过 stackoverflow 搜索，我了解到它可以使用外部库（如 jQuery）轻松实现，但对于这个项目，我决定不依赖其中任何一个。

标记

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

样式

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

正如我在评论中提到的，您无法转换 background-image 属性，但如果您愿意添加额外的标记然后转换不透明度，则可以获得所需的效果。所以你会有一些这样的标记：

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

然后在图像上设置过渡，绝对定位它们（​​这样它们就像背景一样），并默认隐藏其中一个（为了清楚起见，我省略了供应商扩展）：

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

然后交换li:hover上的不透明度值：

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

Here's a full working example。这不是一个理想的解决方案，因为您必须添加额外的标记，但它会起作用。

Answer 2

这是我用来实现此目的的代码示例。图像是精灵，每个精灵都包含正常和悬停状态。诀窍是将 img 添加到 li 和 a 中，并使用 opacity 来改变图像的外观。然后，您可以使用 css3 过渡使其看起来更平滑。

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