图像悬停居中，与悬停的链接无关答案

【问题标题】：Image hover is centred and not relative to link that is being hovered over图像悬停居中，与悬停的链接无关
【发布时间】：2018-06-06 14:58:27
【问题描述】：

在我正在开发的一个网站上，我在一个容器中获得了图像，这些图像需要在悬停时出现在文本上方。这工作顺利但是..

只要图像出现，它就会停留在与前一个悬停相同的位置。我正在尝试使图像仅显示在与其关联的链接上，但它不起作用。

我运行了一些 JavaScript 来随机化链接颜色。

您可以在此处找到正在运行的网页：http://bravenewfashion.com/menu.html 它位于标题为“生物学与时尚”的标签上

【问题讨论】：

您能展示一些代码来向我们展示您的尝试吗？
嗨 Olly，你能告诉我们你的代码吗？
drive.google.com/drive/folders/…
@nsayer 感谢您的回复。我不知道怎么放在这里，所以我把一些截图上传到了谷歌驱动器
@OllyLenain 我没有看到您放置图像的任何 css 或 js 代码？您应该将图像嵌套在每个链接旁边（或内部）的 html 中，或者计算悬停图像的 top 和 left 值。如果您可以创建 JSFiddle 或其他示例，我可以提供更多帮助。

【解决方案1】：

感谢您的工作示例。如果您将图像嵌套在a 标记的内部，它会自动将自己定位在链接旁边。然后，您可以为 top 和 left 添加一些规则，以将它们定位在您的网站现在所做的链接上。

【讨论】：

非常感谢！我真的很感激帮助。是否可以在图片打开时阻止后面的文字向下移动？
@OllyLenain 是的，您可以将position: relative 添加到.imgTrigger 类中，然后将.hoverImage 更改为position: absolute：jsfiddle.net/z6hew58u/7