Question

我在div中有标题图像，另一个div在标题div下面有一些内容。当我悬停内容div时，标题图像应该更改为另一个具有一定效果的图像。这可以用css本身完成还是需要jquery？..谢谢。

Answer 1

如果您在更改时需要效果，我们需要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

Answer 2

CSS不允许在另一个元素上使用：hover类，因此您需要使用JavaScript来执行此操作。

Check this fiddle没有动画

带动画的

Check this fiddle

的Javascript

$('#content').hover(function() {
    $('.hover-image').fadeIn('slow');
},
function() {
    $('.hover-image').fadeOut('slow');
})

HTML

<div id="header">
    <img src="http://media.smashingmagazine.com/images/header-contest/full/avto.jpg" />
    <img class="hover-image" src="http://mitosoc.org/blogs/wp-content/themes/Cutline2pt1/images/header.jpg">
</div>
<div id="content">Lorem ipsum viverra tortor donec nulla torquent porttitor diam praesent viverra, curae felis semper ad ultricies vitae placerat convallis sagittis felis, quisque etiam dui in primis sit curabitur porttitor ornare velit fames aptent lobortis accumsan torquent quam libero fames, porttitor etiam netus suspendisse sagittis potenti.</div>

CSS

#header { overflow:hidden; width:850px; height:200px; position:relative; }
.hover-image { display:none; position:absolute; z-index:1; top:0; left:0; }

Answer 3

<html>
<head>
<style type="text/css">
.logo-img{
     background-color:green;
}
.logo-img:hover{
     opacity:0.5;
     background-color:red;
}
</style>
<body>
<img src="/img/logo.png" class="logo-img">
</body>
</html>

当我将鼠标悬停在另一个div上时，更改标题的图像

3 个答案: