仅在文本链接悬停 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:hover 与我想显示为背景图像的图片一起使用，但我认为它不能被操纵以完整显示而不是被剪切到文本链接的大小.

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: Pop up image css link 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 将无法调用其他类似的元素，您需要使用 JavaScript 来超越子选择器或兄弟选择器.

CSS isn't going to be able to call other elements like that, you'll need to use JavaScript to reach beyond a child or sibling selector.

>

你可以试试这样的:

You could try something like this:

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

然后...

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

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