下面显示的是我的html代码的格式。在标题 div 中，我有一个图像。包含 div 内的每个框(框 1、框 2、框 3)都有内部链接，如(软件开发(框 1)、图形设计(框 2)和技术培训(框 3)。单击这些链接时，我将带我到单独的页面，这些页面有它们的自己的标题图片。所以我有每个框的 3 个标题图片和主页中的默认标题图片。在主页中，每当我将鼠标悬停在 box1 div 中时，标题图片应该更改为 box1 标题图片并产生效果喜欢 fadeIn 并在鼠标移出时返回我的默认图像。同样适用于 box2 和 box3。请帮助我使用 CSS 或 JS 或 jQuery 执行此操作。谢谢
<body>
<div class="wrapper">
<div class="out">
<div class="in">
<div id="header"></div>
<div class="contain">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</div>
</div>
</body>
CSS:
.wrapper{
width: 100%
height: auto;
margin: 0px;
}
.out{
margin: auto;
width: 1000px;
height: 730px;
border-top: 5px solid #333333;
}
.in{
width: 900px;
height: 640px;
margin: auto;
margin-top: 25px;
}
#header{
background:url(../img/Untitled-1.jpg);
height: 175px;
width: 900px;
margin: 0px;
}
.contain{
margin: 0px;
width: 900px;
height: 428px;
}
.box1{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 0px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
.box2{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 302px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
.box3{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 602px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
最佳答案
我做了一个BIN
我为所有 3 个 div 放置相同的图像
$('#content,#content2,#content3').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});
你用你各自的图像改变
$('#content').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});
$('#content2').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});....
关于javascript - 当鼠标悬停在另一个 div 上时，使用淡入淡出等任何效果更改 div 中的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13819154/