鼠标悬停时图像顶部的图像答案

【问题标题】：Image on top of image on mouseover鼠标悬停时图像顶部的图像
【发布时间】：2011-02-04 19:10:15
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript window modal-dialog

【解决方案1】：

我能想到的最好方法是使用 jquery 进行 onmouseover 事件，将图像引用交换为新引用，然后进行 onmouseout 事件将原始图像引用放回原处

【讨论】：

【解决方案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;
}

【讨论】：

这对我来说非常有效。谢谢！我该如何做到这一点，如果您点击灰色框，您会转到 1 个目的地，但如果您点击“此处的信息”，您会被带到另一个目的地？
@Ryan 向弹出图像添加点击处理程序应该可以工作。例如jsfiddle.net/subhaze/qnN96/10