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

我已經環顧了一下，但大多數解決方案都是特定於鏈接背景的，而不是div的背景。我試圖瞭解如何通過將鼠標懸停在特定div中的鏈接上來爲整個div映像交換背景。更改Div鏈接懸停的背景圖片和內容？

通過訪問此頁：http://splash.org/，然後向下滾動到「今天我們服務」部分，您可以在那裏內容懸停和背景圖像會發生變化。

謝謝！

來源

2015-04-02 vpoola88

請檢查鏈接http://stackoverflow.com/questions/14567354/how-to-改變-DIV-背景時-I-懸停一個鏈接。這可能會幫助你。 – 2015-04-02 10:00:26

@SachinR我不認爲這是可行的，雖然bc背景屬性賦予了a，而不是整個div。對？ – vpoola88 2015-04-02 10:10:21

這裏是一個小提琴處理它：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 ; 
}

來源

2015-04-02 10:10:55

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

回答

相關問題