悬停时jquery图像预览 - 如何设置固定位置?

时间:2012-10-05 18:07:21

标签: javascript jquery css jquery-plugins jquery-selectors

请参阅here。我想将图像预览/工具提示放在相同的位置,无论我翻过什么图像缩略图,我都无法让这个工作。我已设法将内联CSS设置为绝对位置,但随后根据我悬停在其上的缩略图仍然会改变该位置。

这是我的jsfiddle: http://jsfiddle.net/FsPSZ/

如果有人能够解释如何让预览图像保持在一个确定的全部3位置,这将是很棒的。

编辑:感谢凝灰岩​​在我们之后发布了令人兴奋的事情:http://jsbin.com/ogutiv/1/edit问题是,我怎么能拥有这个动画?我试图使用CSS3和Opacity转换,但无法让它工作。感谢。

2 个答案:

答案 0 :(得分:2)

好的,我不确定你是否意味着工具提示的位置应该相对于各自的缩略图固定,或者所有的工具提示应该出现在一个固定的位置。

在任何一种情况下,你都可以不使用JS,因为你所有的JS都是用来计算相对于光标的位置,你说你不想要它。

这是一个演示,显示相对于缩略图固定位置的工具提示:http://jsbin.com/ogutiv/2/edit

这是一个演示,显示相对于所有缩略图容器的单个固定位置的工具提示:http://jsbin.com/ogutiv/1/edit

答案 1 :(得分:0)

使用类似的东西

$("#img").mouseover(function(){
$(this).css("postion","absolute");
})

$("#img").mouseout(function(){
$(this).css("postion","relative");
})