更改Div的背景圖片和鏈接懸停時的內容？

Question

我環顧了一下，但是大多數解決方案是特定於鏈接背景的，而不是div的背景。 我試圖通過將鼠標懸停在特定div上的鏈接上來了解如何為整個div交換背景圖像。

通過訪問此頁面： http : //splash.org/ ，並向下滾動到“今天我們已投放”部分，您可以將鼠標懸停在該頁面上的內容上，背景圖片將更改。

謝謝！

Answer 1

這是一個可以解決它的小提琴： https : //jsfiddle.net/pnok7euo/

並為其編寫代碼。

以一種簡單的方式：div容器是相對放置的。 其他兩個div都以絕對值（100％寬度/高度）放置在其中。

鏈接已定位，但可以位於其他任何位置。

在JS上，當鏈接位於鼠標懸停時，我們只需淡出第一個塊，淡入第二個塊。

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 ;
}