图片上鼠标悬停

图像上我看怎么做类似这样的东西页：http://www.gap.com/browse/category.do?cid=15043 图片上鼠标悬停

当你将鼠标悬停在衬衫，它显示了快速查看图像。我不知道如何在鼠标悬停时显示图像。棘手的部分是，你仍然可以点击衬衫，然后将你带到产品页面。如果你点击Quick Look图像，它会将你带到一个模态窗口。我的模式窗口以我想要的方式工作，我只是不知道如何在鼠标悬停的主要产品图像上显示快速查看类型图像。

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

来源

2011-02-04 Ryan

我能想到做到这一点，最好的办法是使用jQuery来做出交换为新的参考图像参考的onmouseover事件，则使该把原始图像参考放回原处的onmouseout事件

来源

2011-02-04 19:14:28 khr055

你可以使用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; 
}

来源

2011-02-04 20:47:35 subhaze

这对我来说真的很好。谢谢！我该如何做到这一点，如果你点击灰色方框你去1目的地，但如果你点击'信息在这里'你被带到不同的目的地？ – Ryan 2011-02-04 21:39:34

@Ryan添加一个点击处理程序到弹出图像应该工作。例如http://www.jsfiddle.net/subhaze/qnN96/10/ – subhaze 2011-02-06 05:17:14

去关一下@subhaze贴出来，我可以不知道为什么这不起作用...

<a href="http://cnn.com"><img border="0" src="spoons.jpg"></a> 
<a class='example7' href="http://foxnews.com"> 
<div class="img"><img border="0" src="btn_quickview.gif"></div></a>

来源

2011-02-06 04:08:11 Tom

图片上鼠标悬停

回答

相关问题