仅在文本链接悬停 CSS 上显示图像答案

【问题标题】：Display Image On Text Link Hover CSS Only仅在文本链接悬停 CSS 上显示图像
【发布时间】：2012-06-01 21:33:09
【问题描述】：

我有一个文本链接。当用户将鼠标悬停在文本链接上时，我希望在页面的其他位置显示图像。我想用 css 做到这一点。我认为这可以通过链接中的一行代码（如鼠标悬停）来完成，但似乎需要页面上其他地方的其他代码。

我尝试将 a:hover 与我想显示为背景图像的图片一起使用，但我认为它不能被操纵以完全显示而不是被剪裁到文本链接的大小。

当我尝试搜索此内容时，我看到了数百个结果，但没有一个是我想要的。我找到的最接近的是这个。

http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

但这适用于将鼠标悬停在缩略图上。我只是希望用户将鼠标悬停在单个文本链接上以在页面上的其他位置显示图像。我从这个帖子中找到了那个画廊：Pop up image css link on hover

我不想处理任何 jquery 或太多脚本，因为我更熟悉 css。有没有人知道一个简单的方法来做到这一点，或者仍然没有办法，即使对 css3 进行了所有更改？

谢谢！

【问题讨论】：

标签： css image hyperlink hover onmouseover

【解决方案1】：

可以单独使用 CSS 来完成。它在我的机器上完美运行，在 Ubuntu 12.04 下的 Firefox、Chrome 和 Opera 浏览器中运行。

CSS：

.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }

HTML：

<div class="hover_img">
     <a href="#">Show Image<span><img src="images/01.png" alt="image" height="100" /></span></a>
</div>

【讨论】：

这太棒了，完全符合我的要求，谢谢！但是，当它在表格内时，我遇到了一个问题，它不会显示图像的完整大小，因为的大小是未定义的，但我假设它更小，因为图片对应的链接。你有什么办法解决这个问题吗？有没有办法让图像基本上“漂浮”在桌子上方，而不一定在桌子内部？
将这些行添加到 .hover_img a:hover span css... height: 200px;宽度：200px；溢出：可见；它显示了@Spartacus38 想要什么
这应该被标记为一个解决方案。工作得很好，速度很快

【解决方案2】：

CSS 不能像那样调用其他元素，您需要使用 JavaScript 来超越子选择器或兄弟选择器。

你可以试试这样的：

<a>Some Link
<div><img src="/you/image" /></div>
</a>

那么……

a>div { display: none; }
a:hover>div { display: block; }

【讨论】：

好吧，我明白你的意思了。它会被隐藏，但当我将鼠标悬停在链接上时会显示，因为它们与“>”链接。我会尝试看看会发生什么，谢谢！
太棒了，我让它工作了！我所做的唯一更改是将悬停 div 设置为内联，因为在您完成悬停后，block 使它移动了它旁边的链接，然后在 html 部分中，我给了 div 一个类，我为其设置了一个绝对位置，因此图像中的div 会显示在页面上我想要的位置。它完全按照我的意愿工作，非常感谢！！！
哦，我也将 a>div 换成了 a
@fluidbyte，我尝试在

<img src="default_image.jpg" id="image" width="100" height="100" alt="" /> <a href="page.html" onmouseover="document.images['image'].src='mouseover.jpg';" onmouseout="document.images['image'].src='default_image.jpg';"/>Text</a>