【发布时间】：2015-09-12 02:09:54
【问题描述】：
我有一个父 div，#crbigimg，其中有一个图像#copyrightimagecurrent。
除此之外，在父 div 中还有四个较小的 div，每个 div 在#copyrightimagecurrent 图像上具有不同的大小和位置。
结构如下：
<div id="crbigimg">
<img id="copyrightimagecurrent" src="http://bonfiredog.co.uk/ooo/icons/copyrightbase.png" alt="Copyright" />
<div id="copyright1"></div>
<div id="copyright2"></div>
<div id="copyright3"></div>
<div id="copyright4"></div>
</div>
我想做的是，当将鼠标悬停在每个 #copyright 子 div 上时，更改 #copyrightimagecurrent 图像的 src 以显示不同的图像，并且当从悬停位置移除鼠标时，返回它到原始的src。
我假设为此我需要在子 div 上调用 .hover jQuery 函数，然后再更改 HTML 本身。然而，第二部分目前超出了我的能力范围。
如果有人可以帮助我，我将不胜感激。
有关相关页面的实时构建，请参阅：http://bonfiredog.co.uk/copyright
对于原始代码本身：
HTML
<html>
<body>
<div id="crbigimg">
<img id="copyrightimagecurrent" src="http://bonfiredog.co.uk/ooo/icons/copyrightbase.png" alt="Copyright" />
<div id="copyright1"></div>
<div id="copyright2"></div>
<div id="copyright3"></div>
<div id="copyright4"></div>
</div>
</body>
<html>
CSS
#crbigimg{
margin-left:auto;
margin-right:auto;
margin-top:0%;
width:25%;
text-align:center;
}
#crbigimg img{
display:block;
margin-left:auto;
margin-right:auto;
width:100%;
height:auto;
}
#copyright1{
border: 2px solid green;
width:3%;
height:6%;
position:absolute;
top:21%;
left:50%;
z-index:5;
}
#copyright2{
border: 2px solid red;
width: 6.5%;
height: 15.4%;
position: absolute;
top: 20%;
left: 45.3%;
z-index: 2;
}
#copyright3{
border: 2px solid purple;
width: 5.4%;
height: 8%;
position: absolute;
top: 11.5%;
left: 45.4%;
z-index: 3;
}
#copyright4{
border: 2px solid blue;
width: 4.1%;
height: 6.6%;
position: absolute;
top: 11.6%;
left: 49.6%;
z-index: 4;
}
目前还没有 Javascript/jQuery！
【问题讨论】：
-
请发布一个包含您的 JavaScript 的最小、完整的代码示例，而不是或附加到您的外部站点链接。一年后，这个问题仍然会出现在该链接中，但该页面上的代码可能已完全更改，使得该问题对未来的访问者无法使用。
-
现在已经这样做了！谢谢你的提示。