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

正如我在评论中提到的那样,你无法转换背景图像属性,但是如果你愿意添加额外的标记然后转换不透明度,你可以得到你正在寻找的那种效果.所以你会有这样的标记：

• 

  

  Foobar

然后在图像上设置转换,绝对定位它们(​​所以它们就像背景一样),并默认隐藏其中一个(为清晰起见,我省略了供应商扩展)：

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.不是一个理想的解决方案,因为你必须添加额外的标记,但它会起作用.