在文本链接上显示图像仅悬停CSS [英] Display Image On Text Link Hover CSS Only

问题描述

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

I have a text link. When the user hovers over the text link, I want an image to be displayed elsewhere on the page. I want to do this using css. I thought it could be done simply with a single line of code in the link like an onmouseover but it seems that requires other code elsewhere on the page.

我尝试使用a：悬停在图片上，我想显示为背景图片，但我不认为它可以被操作显示为完整，而不是被剪裁到文本链接的大小。

I tried using the a:hover with the picture I want to show as a background-image but I don't think it can be manipulated to display in full instead of being clipped down to the size of the text link.

当我尝试搜索这个，但我没有一个是我想要的，我看到数百个结果。我发现的最接近的是这个。

I see hundreds of results when I try to search for this but none of them are what I want. The closest thing I found was this.

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

但是这样可以将鼠标悬停在缩略图上图片。我只想让用户将鼠标悬停在单个文本链接上，以便在其他位置的页面上显示图片。我从以下主题中发现了图库：悬停时弹出的css链接图片

But that's working with hovering over thumbnail images. I just want the user to hover over a single text link to have an image show on the page somewhere else. I found that gallery from this thread: css link pop up image on hover

我不想处理任何jquery或太多的脚本，因为我更熟悉css。有没有人知道一个简单的方法来做到这一点还是没有办法，甚至没有所有的变化为CSS3？

I don't want to deal with whatever that jquery is or too much scripts because I'm more familiar with css. Does anyone know of a simple way to do this or is there still no way, not even with all the changes made for css3?

感谢！

推荐答案

CSS不可能

您可以尝试这样的：

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

然后...

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

这篇关于在文本链接上显示图像仅悬停CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！