Question

我需要有关鼠标悬停问题的帮助。

在div容器中，我有三个并排的图像。当用户将鼠标悬停在任意三个图像上时，我需要交换覆盖三个图像的整个区域的图像。

每次用户将鼠标悬停在三个图像中的一个上时，我需要让其中一个大图像替换较小的图像。图像在这里：

因此，如果用户将鼠标悬停在标记为“参与：然后大”的图像上，则会显示所有三个图像的位置。其他两个图像相同。

以下是代码：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;
}

我希望我解释得足够，

谢谢，

加里

Answer 1

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

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

FIDDLE

鼠标悬停在图像交换上

1 个答案: