我在一个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