Javascript 更改链接悬停上的Div背景图像和内容?
我环顾了一下,但是大多数解决方案都是特定于links背景的,而不是div的背景。我试图了解如何通过将鼠标悬停在特定div中的链接上,为整个div切换背景图像 通过访问此页面:,并向下滚动到“今天我们服务”部分,您可以将鼠标悬停在那里的内容上,背景图像将发生变化Javascript 更改链接悬停上的Div背景图像和内容?,javascript,image,css,background-image,Javascript,Image,Css,Background Image,我环顾了一下,但是大多数解决方案都是特定于links背景的,而不是div的背景。我试图了解如何通过将鼠标悬停在特定div中的链接上,为整个div切换背景图像 通过访问此页面:,并向下滚动到“今天我们服务”部分,您可以将鼠标悬停在那里的内容上,背景图像将发生变化 谢谢 这里有一把小提琴可以处理它: 和代码 简单地说: div容器的位置是相对的。其他两个div均以绝对值(100%宽度/高度)定位在其中 链接已定位,但可以位于其他任何位置 在JS上,当链接是mouseover时,我们只是淡出第一个块,
谢谢 这里有一把小提琴可以处理它: 和代码 简单地说: div容器的位置是相对的。其他两个div均以绝对值(100%宽度/高度)定位在其中 链接已定位,但可以位于其他任何位置 在JS上,当链接是mouseover时,我们只是淡出第一个块,淡出第二个块 HTML:
<div id="container">
<a href="" class="hover"></a>
<div id="back">Back content ?</div>
<div id="back2">Back 2 content ?</div>
</div>
CSS:
请检查链接。这可能对你有帮助。@sachinnr我认为这不起作用,尽管bc的background属性是给a的,而不是给整个div的。对吗?
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() ;
}) ;
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 ;
}