在mouseover上的图像顶部的图像

Question

我正在研究如何执行与此页面类似的操作：http://www.gap.com/browse/category.do?cid=15043

当您将鼠标悬停在衬衫上时，它会显示“快速查看”图像。鼠标悬停时我无法弄清楚如何显示图像。棘手的部分是你仍然可以点击衬衫然后将你带到产品页面。如果单击“快速查看”图像，则会转到模态窗口。我已经按照我想要的方式运行模态窗口，我只是不知道如何在鼠标悬停的主要产品图像上显示Quick Look类型图像。

任何帮助将不胜感激！谢谢！

Answer 1

我能想到的最好的方法是使用jquery创建一个onmouseover事件，交换新引用的图像引用，然后创建一个onmouseout事件，将原始图像引用放回原位

Answer 2

您可以使用CSS来完成此任务。我在此示例中使用div，但图片也可以正常运行：Live example

<强> HTML

<a href="#"><div class="img">info here</div></a>

<强> CSS

a{
    display:block;
    background-color:#666;
    width:100px;
    height:100px;
}

a div.img{
    display:none;
}

a:hover div.img{
    display:block;
}