仅在文本链接悬停 CSS 上显示图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10769016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display Image On Text Link Hover CSS Only
提问by user1418023
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.
我有文字链接。当用户将鼠标悬停在文本链接上时，我希望在页面的其他位置显示图像。我想使用 css 来做到这一点。我认为它可以像 onmouseover 一样简单地在链接中使用一行代码来完成，但似乎需要页面上其他地方的其他代码。
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.
我尝试将 a:hover 与我想显示为背景图像的图片一起使用，但我不认为它可以被操纵以完整显示而不是被裁剪到文本链接的大小。
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/
http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/
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
但这适用于将鼠标悬停在缩略图上。我只是希望用户将鼠标悬停在单个文本链接上，以便在页面上的其他地方显示图像。我从这个线程中找到了那个画廊：Pop up image css link on hover
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?
我不想处理 jquery 是什么或太多脚本，因为我更熟悉 css。有没有人知道一种简单的方法来做到这一点，或者仍然没有办法，即使对 css3 进行了所有更改？
Thanks!
谢谢！
回答by Naveen Web Solutions
It can be done using CSS alone. It works perfect on my machine in Firefox, Chrome and Opera browser under Ubuntu 12.04.
它可以单独使用 CSS 来完成。它在我的机器上在 Ubuntu 12.04 下的 Firefox、Chrome 和 Opera 浏览器中完美运行。
CSS :
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 :
HTML :
<div class="hover_img">
<a href="#">Show Image<span><img src="images/01.png" alt="image" height="100" /></span></a>
</div>
回答by Fluidbyte
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.
CSS 将无法像这样调用其他元素，您需要使用 JavaScript 来超越子选择器或兄弟选择器。
You could try something like this:
你可以尝试这样的事情：
<a>Some Link
<div><img src="/you/image" /></div>
</a>
then...
然后...
a>div { display: none; }
a:hover>div { display: block; }
回答by gta6cheats.club
add
添加
.hover_img a:hover span {
display: block;
width: 350px;
}
to show hover image full size in table change 350 to your size.
要在表格中显示全尺寸悬停图像，请将 350 更改为您的尺寸。
回答by Ian Gardner
From w3 schools:
来自w3 学校：
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover over me
<img src="/pathtoimage" class="tooltiptext">
</div>
Sounds like about what you want
听起来像你想要的
回答by Ido Bar Lev
I did something like that:
我做了这样的事情：
HTML:
HTML：
<p class='parent'>text text text</p>
<img class='child' src='idk.png'>
CSS:
CSS：
.child {
visibility: hidden;
}
.parent:hover .child {
visibility: visible;
}
回答by Storm3y
It is not possible to do this with just CSS alone, you will need to use Javascript.
仅使用 CSS 无法做到这一点，您需要使用 Javascript。
<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>
