对.hover DIV更改背景图片 - 淡入 [英] Change DIV background image on .hover - with fade

问题描述

我在寻找使用标准.hover链接褪色从一个背景图像到另一个。

I'm looking to fade from one background image to another using a standard .hover link.

没有褪色的链路的例子可以在这里看到：
http://www.makestudio.co.uk/sites/seven/

An example of the link without the fade can be seen here: http://www.makestudio.co.uk/sites/seven/

其他网页会使用相似的布局的链接仅不同的背景图像。任何帮助将是惊人的。

Other pages within the site will use similar layout only different background images for the links. Any help would be amazing.

推荐答案

不需要jQuery的，只是CSS

Don't need jquery, just css

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

CSS ...

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样品

使用图像您可以使用CSS不透明淡出图像，然后照亮它悬停。你真的不能图像之间不褪色的jQuery虽然。

With an image you can use CSS for opacity to fade the image then brighten it up on hover. You can't really fade between images without jquery though.

这篇关于对.hover DIV更改背景图片 - 淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！