鼠标悬停时的简单HTML5/CSS3背景图像转换

我试图理解最简单的背景转换，只使用HTML5和CSS3。通过stackoverflow搜索我了解到，使用外部库（如

jQuery

）可以很容易地实现它，但是对于这个项目，我决定不依赖这些库中的任何一个

标记

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

---

正如我在评论中提到的，您不能转换

背景图像

属性，但如果您愿意添加额外的标记，然后转换不透明度，则可以获得所需的效果。因此，您将有如下一些标记：

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

然后交换

li:hover

上的不透明度值：

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

---

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

下面是我用来实现这一点的代码示例。这些图像是精灵，每个精灵都包含正常和悬停状态。诀窍是将img添加到li和a，并使用不透明度更改图像的外观。然后，可以使用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;}

#homenav li.h，#homenav li.h{背景图像：url（'img/btn_home.gif'）；}
#homenav li.i，#homenav li.i{背景图像：url（'img/btn_inloggen.gif'）；}
#homenav li.v，#homenav li.v{背景图片：url（'img/btn_voorbeelden.jpg'）；}
#homenav li{背景位置：0 170px；}
#homenav LIA{背景位置：0；}
#homenav li a:悬停
{不透明度：0；
-webkit过渡：不透明度。8s易用；
-moz过渡：不透明度。8s缓进；
-o型过渡：不透明度。8s缓进；
过渡：不透明度.8s缓进；}
#homenav a{显示：块；高度：100%；}
#homenav a span{display:none；}

改为使用CSS精灵，并更改悬停时的背景位置值以获得过渡效果。@SalmanPK：非常感谢您的评论！我考虑过CSS精灵，但这不会在图像之间进行任何转换（淡入/淡出），对吗？在任何情况下，您是否介意提供一个关于您建议的方法的小代码示例？您可以在背景图像上执行的唯一转换是更改位置和其他数字属性，您不能使它们彼此淡入。@robertc:感谢您的贡献。你介意把这条评论作为一个答案，这样我最终会接受它吗？谢谢你的回复-你介意重构你的代码，使其与问题中提供的代码片段兼容吗？很好的例子，与其他几个CSS调整一起使用…替换了一些正在这样做的JavaScript，性能的提高是绝对荒谬的！！！帧从60.00ms到大约16/17.00ms，没有JS开销=）

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

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