将鼠标悬停在图像上时需要 CSS 效果，以获取另一个图像和/或文本以显示在其上方

Posted 2023-03-05

【中文标题】将鼠标悬停在图像上时需要 CSS 效果，以获取另一个图像和/或文本以显示在其上方

【英文标题】：Need CSS effect when hovering over an image, to get another image and/or text to display above it

【发布时间】：2012-02-17 19:06:09

【问题描述】：

我公司的网站上有 10 个国家/地区的标志 (VS 2010/vb/asp.net4.0)。点击旗帜将在整个会话期间以该国家/地区的语言显示网站。

我希望，当客户将鼠标悬停在国旗上时，将 该国家/地区的迷你图片悬停在国旗上方和右侧。因此，当他们点击德国国旗时，右上角会出现一张德国的小地图——我会对其进行 z-index 索引，使其位于其上方表格行的上方——并在除了图片，它还会说“Deutch”或“用德语查看此网站”（当然是德语）。

                   **Images of countries here when hovering**
       Flag1  Flag2  Flag3  Flag4  Flag5  Flag6  Flag7  Flag8

对于像我这样不擅长 CSS 的人来说，这可能吗？如果可以，我将如何去做？任何指导将不胜感激！

【问题讨论】：

我认为这可能是您最好应用“KISS”方法的事情之一！ （保持简单愚蠢）我认为一般人们都很清楚他们的标志，所以添加额外的东西要么会让那些期望它以某种方式工作的人感到困惑，要么会冒犯他们！

这很好，Treemonkey，我将研究这些解决方案，看看是否可以在我的网站上使用任何解决方案，但我确实认为你的观点很好。我会在查看这些解决方案后尽快与您联系。

【参考方案1】：

这很简单，只需使用 CSS，根本不需要 javascript。有很多细节，但基本模式是将图像放在与标志相同的元素中。我们称之为.flag。将国家图像设置为display:none;。然后，将.flag:hover img 设置为display:block;。这将使图像仅在悬停在标志上时出现。

您必须将标志元素的位置设置为相对位置，将国家/地区图像的位置设置为绝对位置。这将允许您将图像的顶部和右侧位置设置为您想要的位置。

【讨论】：

谢谢 Nate——感谢您的回复！与其他人一起，我仍在尝试实施某种类型的解决方案——所有建议都有帮助。再次感谢！

【参考方案2】：

假设您使用的是列表

<a class="flagbutton">
  <img src="/flag1"/>
  <img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
  <img src="/flag1"/>
  <img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
  <img src="/flag1"/>
  <img class="map" src="/flag1map"/>
</a>

.map
display:none;

a.flagbutton:hover .map
display:block;

您可以在 .map 位中添加额外的 css 来进行定位！

【讨论】：

感谢 Tree，您抽出宝贵时间回复！我认为这个解决方案的问题是因为我的代码是用 asp.net 编写的，而不是标准的 html，如下所示： ​​ton>

你可以使用这个，我希望我会更新答案以适应这个问题！所以在这里你将有 1 张标志图像和 1 张悬停在锚标签内的图像

我已经更新了上面的答案希望你可以这样实现！

太不可思议了，树猴！你真是个天才！我必须将顶部定位到 120 像素，将右侧定位到 220 像素，我按照您的说明进行操作，效果非常好！ Chrome、FF、IE，一切顺利！衷心感谢您抽出宝贵时间的帮助 - 非常感谢！

我同意 KISS ... 有时少即是多，但我很抱歉 - 你的解决方案太酷了，我必须在我们工程师公司的网站上使用它！

【参考方案3】：

我为你创建了一个小提琴 - http://jsfiddle.net/UHZzJ/

您也可以将列表替换为<div> 或您的结构要求。显示“以德语查看此网站”的行需要位于链接旁边的子 div 中，并且绝对定位到父 <div>。

忘记添加了，li:hover 在 IE6 中不起作用。仅允许使用 a:hover。在这种情况下，您必须将 div 放在<a> 中（设置display:block）。如果您对 JQuery 持开放态度，还有更优雅的解决方案 - http://flowplayer.org/tools/tooltip/index.html、http://craigsworks.com/projects/qtip/

【讨论】：

感谢您抽出宝贵时间，Sagar -- 感谢您的帮助！我认为很难实现该解决方案（我尝试过），因为我的代码不是用 html ul 和 li 编写的，而是这样编写的：​​ton>

【参考方案4】：

您可以在 CSS 中完成，但如果您需要动画，则需要 JS。这是没有动画的代码。

HTML

</ul>
   <li class="item">
      <img src="flag.jpg" />
      <img src="pic.jpg" class="pic" />
   </li>
   <li class="item">
      <img src="flag.jpg" />
      <img src="pic.jpg" class="pic" />
   </li>
   <li class="item">
      <img src="flag.jpg" />
      <img src="pic.jpg" class="pic" />
   </li>
.
.
.
</ul>

CSS

.item 
   position:relative; /*Needed for pos:absolute below*/

.pic 
   display:none;

.item:hover pic 
   display:block;
   position:absolute;
   top:-20px;

【讨论】：

我喜欢你的解决方案，Ege，我试过了。我的代码不是用 html li 和 ul 编写的，所以我无法让它正常工作（没有显示用于鼠标悬停的图像，只是为了一直显示） -- ​​ton> .....不过感谢您抽出宝贵时间回复！

【参考方案5】：

我建议使用 jquery，因为它可以让您在悬停时获得图像/文本的显示。 CSS 将用于定位和格式化图像或文本。

这是一个很好的参考。

http://api.jquery.com/mouseover/

【讨论】：

我已经在我的网站上实现了 jquery，Robert，但我不确定您链接的示例中的那个，对于像我这样不太聪明的人来说可能有点过于复杂。但是非常感谢您抽出时间来帮助我！