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

Posted 2023-05-09

【中文标题】悬停时的jquery图像预览-如何设置固定位置？

【英文标题】：jquery image preview on hover - how to set fixed position?

【发布时间】：2012-09-26 22:25:58

【问题描述】：

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

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

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

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

【参考方案1】：

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

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

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

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

【讨论】：

选项 B：我希望工具提示/预览全部设置为一个位置，我不希望它们基于缩略图的位置。谢谢！

好的，看第二个演示。关键是删除.thumbnail-item 上的position: relative，以便工具提示将相对于缩略图的容器而不是每个缩略图定位。如果该容器不是页面正文，则需要在容器上设置position: relative。

还有一件事，我怎么能把这些动画放进去？我已经通过 CSS3 尝试过，但无法让它工作？！谢谢！

您可以使用转场+opacity 和visibility 属性进行淡入淡出（需要使用visibility 作为display: none 杀死转场）：jsbin.com/ogutiv/7/edit

【参考方案2】：

使用类似的东西

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

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

【讨论】：

谢谢我试过了，但它对我不起作用，除非我做错了什么？请注意编辑我的小提琴或为我扩展一点。谢谢！