Html 鼠标悬停时的简单 HTML5/CSS3 背景图像转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6184887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple HTML5/CSS3 background image transition on mouse hover
提问by Nano Taboada
I'm trying to understand the simplestbackground transition possible using onlyHTML5and CSS3. Searching through stackoverflow I've learned it can be easily implemented using external libraries such as jQuerybut for this project I've decided not relying on any of those.
我试图了解仅使用和可能实现的最简单的背景转换。搜索 stackoverflow 我了解到它可以使用外部库轻松实现，例如但对于这个项目，我决定不依赖任何这些库。HTML5CSS3jQuery
Markup
标记
<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;
}
回答by robertc
As I mentioned in my comment, you can't transition the background-imageproperty but you can get the sort of effect you're looking for if you're willing to add extra markup and then transition the opacity. So you'll have some markup like this:
正如我在评论中提到的，您无法转换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>
Then set the transition on the images, absolute position them (so they'll be like backgrounds), and hide one of them by default (I've left out the vendor extensions for clarity):
然后在图像上设置过渡，绝对定位它们（所以它们会像背景一样），并默认隐藏其中之一（为了清晰起见，我省略了供应商扩展）：
nav li img {
position: absolute;
transition-duration: 1.5s;
opacity: 1;
}
nav li img:first-child {
opacity: 0;
}
Then swap the opacity values on li:hover:
然后交换不透明度值li:hover：
nav li:hover img {
opacity: 0;
}
nav li:hover img:first-child {
opacity: 1;
}
Here's a full working example. Not an ideal solution because you have to add extra markup, but it'll work.
这是一个完整的工作示例。不是理想的解决方案，因为您必须添加额外的标记，但它会起作用。
回答by Mirthe
Here's an example of the code I use to achieve this. The images are sprites which each contain normal and hover state. The trick is to add the img to both li and a, and to use opacity to change the appearance of the image. You can then use css3 transitions to make this appear smoother.
这是我用来实现此目的的代码示例。图像是精灵，每个精灵都包含正常和悬停状态。诀窍是将 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;}
