问题
I'm looking to fade from one background image to another using a standard .hover link.
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.
回答1:
Don't need jquery, just 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
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.
回答2:
You can't really fade images with CSS.
If you want to try something, though, you can use -webkit-animate and other browser-specific prefixes to animate the opacity of the element itself. You'll need to tinker with it.
Google CSS3 animations for more information. You want to animate the opacity property.
回答3:
Hover on any element won't work on old browsers, so you need to be sure your client base either doesn't use old browsers, or you degrade gracefully.
I'd suggest using Modernizr. Its a js library that will help you have cool effects for up to date browsers while degrading well for ones that don't support your particular feature.
回答4:
You can use CSS transitions to change opacity of the image and reveal another image underneath it.
Demo
回答5:
you may use jQuery to just fade in. Otherwise, if u insist CSS, you may find this some what helpful.
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 */
来源：https://stackoverflow.com/questions/8478685/change-div-background-image-on-hover-with-fade