更改 .hover 上的 DIV 背景图像 - 使用淡入淡出答案

【问题标题】：Change DIV background image on .hover - with fade更改 .hover 上的 DIV 背景图像 - 使用淡入淡出
【发布时间】：2011-12-12 18:01:03
【问题描述】：

我希望使用标准的 .hover 链接从一个背景图像淡化到另一个背景图像。

可以在此处看到不带淡入淡出的链接示例： http://www.makestudio.co.uk/sites/seven/

站点内的其他页面将使用类似的布局，但链接的背景图像不同。任何帮助都会很棒。

【问题讨论】：

标签： image background hover fade

【解决方案1】：

不需要jquery，只需要css

<div id="thisdiv">Content</div>

CSS...

#thisdiv { height: 200px;
width: 200px;
background-color: #600;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s; }
#thisdiv:hover {
background-color: #006;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s;}

jsFiddle sample

对于图像，您可以使用 CSS 的不透明度来淡化图像，然后在悬停时将其变亮。但是，如果没有 jquery，您将无法真正在图像之间淡入淡出。

【讨论】：

啊，我不知道过渡属性 - 固执让我一直在寻找替代图像。我相信我找到了可行的方法。

【解决方案2】：

你不能真正使用 CSS 淡化图像。

不过，如果您想尝试一些东西，可以使用-webkit-animate 和其他特定于浏览器的前缀来为元素本身的不透明度设置动画。你需要修补它。

Google CSS3 动画 了解更多信息。您想要为 opacity 属性设置动画。

【讨论】：

【解决方案3】：

将鼠标悬停在任何元素上都无法在旧浏览器上运行，因此您需要确保您的客户群要么不使用旧浏览器，要么优雅降级。

我建议使用Modernizr。它是一个 js 库，可帮助您为最新的浏览器提供酷炫的效果，同时为不支持您特定功能的浏览器提供良好的降级效果。

【讨论】：

【解决方案4】：

您可以使用 CSS 过渡来更改图像的不透明度并在其下方显示另一张图像。

Demo

【讨论】：

【解决方案5】：

你可以使用 jQuery 来淡入。否则，如果您坚持使用 CSS，您可能会发现这很有帮助。

Try this JSFiddle Link

<!-- HTML-->
<div id="id1" class="item"><a href="#">DIV1</a></div> 
<div id="id2" class="item"><a href="#">DIV2</a></div> 
<div id="id3" class="item"><a href="#">DIV3</a></div> 
<div id="rightDiv">
<a id="id1match" class="region"> </a>
<a id="id2match" class="region"> </a>
<a id="id3match" class="region"> </a>

<div id="fakeDiv1" class="fake"><a href="#">DIV1</a></div>
<div id="fakeDiv2" class="fake"><a href="#">DIV2</a></div>
<div id="fakeDiv3" class="fake"><a href="#">DIV3</a></div>
</div>

<!--CSS -->
/* style of left side */

【讨论】：