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

Posted 2023-03-06

【中文标题】仅在文本链接悬停 CSS 上显示图像

【英文标题】：Display Image On Text Link Hover CSS Only

【发布时间】：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 进行了所有更改？

谢谢！

【参考方案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"   /></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，我尝试在 的样式属性中应用此解决方案，如下所示： style="a>div display: none; ; a:hover>div display: block; " 并且它不起作用。

【参考方案3】：

添加

.hover_img a:hover span 
    display: block;
    width: 350px;

要在表格中显示悬停图像的全尺寸，请将 350 更改为您的尺寸。

【参考方案4】：

来自w3 schools：

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

听起来像是你想要的

【参考方案5】：

我做了类似的事情：

HTML：

<p class='parent'>text text text</p>
<img class='child' src='idk.png'>

CSS：

.child 
    visibility: hidden;


.parent:hover .child 
    visibility: visible;

【参考方案6】：

仅使用 CSS 无法做到这一点，您需要使用 Javascript。

<img src="default_image.jpg" id="image"    />


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