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

Question

请参考这里。无论我翻转什么图像缩略图，我都希望图像预览/工具提示位于相同的位置，我无法让它工作。我已经设法使用内联 CSS 将它设置为绝对位置，但是根据我将鼠标悬停在它上面的缩略图仍然会改变该位置。

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

如果有人能解释我如何让预览图像保持在所有 3 个确定的位置，那就太好了。

编辑：感谢凝灰岩在此处发布我所追求的内容：http://jsbin.com/ogutiv/1/edit问题是，我怎样才能拥有这个动画？我尝试使用 CSS3 和 Opacity 过渡，但无法使其正常工作。谢谢。

score 2 · Accepted Answer

好的，我不确定你的意思是工具提示的位置应该相对于它们各自的缩略图是固定的，还是所有工具提示都应该出现在一个固定的位置。

无论哪种情况，您都可以在没有 JS 的情况下执行此操作，因为您的所有 JS 都用于计算相对于光标的位置，而您说您不想要。

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

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

score 0 · Accepted Answer

使用这样的东西

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

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

2 回答 2