我在一个div和另一个div中有标题图像,并且在div标题下面有一些内容。每当我将内容div悬停时,标题图像都应更改为其他图像,并具有一定效果。可以使用CSS本身完成此操作,还是需要使用jquery ?。谢谢。

最佳答案

如果您在更改时需要效果,则需要javascript或jquery。

在这里,我对animate()做了一个简单的图像更改功能

的CSS

  #header{ background:url(http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg) no-repeat; width:700px; height:400px;}


HTML

 <div id="header"></div>
 <div id="content">Blah Blah Blah</div>


jQuery的

 $(document).ready(function(){
 $('#content').mouseover(function(){
 $('#header').animate({ opacity:1});
 $('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
 $('#header').animate({ opacity:0.1});
 });
 $('#content').mouseleave(function(){
 $('#header').animate({ opacity:0.1});
 $('#header').css('background','url(http://blogs-images.forbes.com/daviddisalvo/files/2012/01/googlelogo2.jpg) no-repeat')
 $('#header').animate({ opacity:1});
});

 });


您可以检查输出here

10-05 20:15
查看更多