0

I need help with a mouse-over issue.

In the div container, I have three images side-by-side. I need to have a image swapped that covers the entire area of the three images when the users mouse hovers over any three of the images.

Each time the user hovers over one of the three images, I need to have one of the large images replace the smaller image. The images are here:

So, if the user hovers over the image labeled "engage: then the large "engage" image will show up where all three images are. Same for the other two images.

Here is the code: http://jsfiddle.net/GaryBoutwell/QzbSQ/

<div align="center">
<div id="multiple" class="swap">
<img class="left" src="http://www.delphidisplay.com/NewDesign/img/image1.jpg" />
<img src="http://www.delphidisplay.com/NewDesign/img/image2.jpg" />
<img class="right" src="http://www.delphidisplay.com/NewDesign/img/image3.jpg" />
</div>
<div id="single" class="swap">
<img src="http://www.delphidisplay.com/NewDesign/img/image1-1.jpg" />
</div>



$('.swap').hover(function () {
    $('.swap').toggle();
});
.swap {
    width: 893px;
}
#multiple {
    text-align: center;
}
#single {
    display: none;
}
.left {
    float: left;
}
.right {
    float: right;
}

I hope I explained it enough,

Thanks,

Gary

4

1 回答 1

1

将大图像放在与包含三个图像的容器大小相同的单独容器中，然后在将鼠标悬停在其中任何一个上时切换容器的可见性。

$('.swap').hover(function(){
    $('.swap').toggle();
});

小提琴

于 2013-06-27T15:14:40.350 回答