Question

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

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

网站内的其他网页将使用类似的布局，仅为链接使用不同的背景图片。任何帮助都会很棒。

Answer 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，你就无法真正淡化图像。

Answer 2

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

但是，如果您想尝试某些操作，可以使用-webkit-animate和其他特定于浏览器的前缀来设置元素本身的不透明度。你需要修补它。

Google CSS3动画以获取更多信息。您想要为opacity属性设置动画。

Answer 3

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

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

Answer 4

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

Demo

Answer 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 */

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

5 个答案: