更改图像< src>在< div>中将鼠标悬停在另一个< div>上时 [英] Change an image <src> within a <div> when hovering over another <div>
问题描述
我有一个父div #crbigimg，它的内部有一个图像#copyrightimagecurrent.
I have a parent div, #crbigimg, which has an image inside it #copyrightimagecurrent.
此外，父div内有四个较小的div，在#copyrightimagecurrent图像上每个div的大小和位置都不同.
As well as this, there are four smaller divs inside the parent div, each of different sizes and positions over the #copyrightimagecurrent image.
结构如下:
<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.
What I would like to do is, when hovering over each of the #copyright child divs, to change the src of the #copyrightimagecurrent image to display a different image, and when removing the mouse from a hover position, returning it to the original src.
我假设要执行此操作，我需要在更改HTML本身之前在子div上调用.hover jQuery函数.但是，当前第二部分超出了我的能力范围.
I assume that to do this I need to call the .hover jQuery function on the child div, before altering the HTML itself. This second part, however, currently lies outside my abilities.
如果有人可以帮助我，我将不胜感激.
If anybody could help me, I would appreciate it.
有关所讨论页面的实时构建，请参见: http://bonfiredog.co.uk/copyright
For a live build of the page in question, see: 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！
No Javascript/jQuery as of yet!
推荐答案
在每个'#copyright'元素上添加新的src:
Add the new src on each '#copyright' element:
<div id="copyright1" data-src="path/to/img.png"></div>
....
在mouseenter上，将此data-src路径应用于img:
On mouseenter, apply this data-src path to the img:
$('#crbigimg > div').on('mouseenter', function() {
var newSrc = $(this).attr('data-src');
var img = $('#copyrightimagecurrent');
img.attr('data-orSrc', img.attr('src'));
img.attr('src',newSrc);
}).on('mouseleave', function() {
var img = $('#copyrightimagecurrent');
img.attr('src',img.attr('data-orSrc'));
});
这篇关于更改图像< src>在< div>中将鼠标悬停在另一个< div>上时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
