更改Div的背景图片和链接悬停时的内容？

Question

i've looked around a bit but most of the solutions are specific to the links background, and not the div's background. I'm trying to understand how to image swap backgrounds for an entire div by hovering over a link in that specific div.

By visiting this page: http://splash.org/ , and scrolling down to "Today we served" section, you can hover over the content there and the background image will change.

Thanks!

Answer 1

here is a little fiddle that can handle it : https://jsfiddle.net/pnok7euo/

And code for it.

In a simple way : a div container is positionned relative. Both 2 other divs are positionned in it in absolute (100% width/height).

A link is positionned, but it can be anywhere else.

On JS, when the link is mouseover, we just fadeOut the first block and fadeIn the second one.

HTML :

<div id="container">
    <a href="" class="hover"></a>
    <div id="back">Back content ?</div>
    <div id="back2">Back 2 content ?</div>
</div>

JS :

jQuery(document).on('mouseover','a.hover',function(){
    jQuery('div#back').stop().fadeOut() ;
    jQuery('div#back2').stop().fadeIn() ;
}) ;

jQuery(document).on('mouseout','a.hover',function(){
    jQuery('div#back2').stop().fadeOut() ;
    jQuery('div#back').stop().fadeIn() ;
}) ;

CSS :

div#container {
    width:500px ;
    height:300px ;
    position:relative ;
}

div#back, div#back2 { 
    position:absolute ;
    top:0 ; left:0 ; right:0 ; bottom:0 ;
    background-position:center center ;
    background-repeat:no-repeat ;
    color:white ;
    text-align:center ;
    font-size:2em ;
}

div#back {
    background-image:url('http://angeoudemongif.a.n.pic.centerblog.net/d3e42620.gif') ;
    z-index:4 ;
}

div#back2 {
    background-image:url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg') ;
    z-index:2 ;
}

a.hover {
    position:absolute ;
    display:block ;
    background:white ;
    opacity:0.8 ;
    padding:10px ;
    top:10px ;
    left:10px ;
    z-index:10 ;
}