在 link 悬停时更改 Div 背景图像和内容？

Question

我环顾四周，但大多数解决方案都是针对 link 的背景，而不是 div 的背景。我试图了解如何通过将鼠标悬停在特定 div 中的 link 上来为整个 div 图像交换背景。

通过访问此页面：http://splash.org/，然后向下滚动到 "Today we served" 部分，您可以将鼠标悬停在该部分的内容上，背景图片将会更改。

谢谢！

Answer 1

这里有一个小 fiddle 可以处理它：https://jsfiddle.net/pnok7euo/

并为其编写代码。

简单来说： div 容器是相对定位的。其他 2 个 div 都在其中绝对定位 (100% width/height)。

一个link被定位，但它可以在任何其他地方。

在 JS 上，当 link 鼠标悬停时，我们只是淡出第一个块并淡入第二个块。

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

在 link 悬停时更改 Div 背景图像和内容？

Change Div background image and content on link hover?

javascript

css

image

background-image