链接翻转以更改背景图像答案

【问题标题】：link rollover to change the background image链接翻转以更改背景图像
【发布时间】：2012-03-28 08:34:56
【问题描述】：

有没有办法在你翻转链接时改变背景？我正在制作一个学位展示网站，并希望在您滚动人名链接时在背景中显示一个大样本图像。我出现了一张图片，但它覆盖了所有文本并位于链接上方的固定位置。有没有办法做到这一点，所以它只是改变背景图像并保持在页面上所有其他文本的后面？

这就是我正在使用的东西

#hover_img img
{
display:none;
}

#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;

}

html

  <div id="hover_img">LINK<img src="image" alt="" /></a></div>

谢谢！

【问题讨论】：

【解决方案1】：

将 z-index: -1 添加到悬停时的图像：

#hover_img:hover img
{
    display:block;
    position:absolute;
    top:0px;
    padding-top:0px;
    z-index: -1;
}

【讨论】：

不。它落后于通常的背景图像。除了翻转之外，还有一个随机的背景图像！
它从放置文本的位置出现，我希望它出现在整个页面上 - 顶部，左侧，0px
@aaron_m12345 有没有办法可以将背景图片的 html 和 css 发布到 fiddle 中？
goodshout，这是因为我使用了我发现的其他花哨的随机图像脚本，可能会使事情复杂化。我们去jsfiddle.net/5yhsL 谢谢！
@aaron_m12345 我已经清理了小提琴中的一些错误：jsfiddle.net/5yhsL/4。现在显示的图像填充了整个背景并覆盖了文本。这就是你想要的效果，除了文字是可见的吗？

【解决方案2】：

您可以通过将文本放在与您的图像元素相邻的另一个元素中来完成此操作。绝对定位的元素将占据其邻居的主导地位，一种解决方法是为后续元素的 position 属性分配一个值。

这是我制作的一个 jsfiddle：

【讨论】：