css - 仅在文本链接悬停 CSS 时显示图像

Question

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

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

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

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

但这适用于将鼠标悬停在缩略图上。我只希望用户将鼠标悬停在单个文本链接上，以便在页面其他地方显示图像。我从这个线程中找到了那个画廊:Pop up image css link on hover

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

谢谢!

Answer 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>