鼠标悬停时简单的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;
}

这是一个完整的工作示例.不是一个理想的解决方案,因为你必须添加额外的标记,但它会工作.