正文 

当前位置： 首页 > 问答 >

如何使用 CSS 在悬停时向图像添加工具提示

     2023-05-08     224

关键词：

【中文标题】如何使用 CSS 在悬停时向图像添加工具提示【英文标题】：How to add tooltip to image on hover with CSS 【发布时间】：2016-08-23 14:47:35 【问题描述】：

我有三张图片，在悬停时它们使用 :hover 在 css 中增加大小。当用户将鼠标悬停在图像上时，我还希望显示带有图像描述的工具提示（我也应该能够定位工具提示）。

HTML

<div class="bottle-container">
<div class="click-to-top"><img src="image-1.png"  />Tooltip text</div>
<div class="click-to-top" style="z-index:5;"><img src="image-2.png"  /></div>
<div class="click-to-top last"><img src="image-3.png"  /></div>
</div>

CSS

container
max-width:600px;
margin:0 auto;
min-height:450px;


div.click-to-top 
display:inline-block;
position:relative;
max-width:160px;


div.click-to-top:hover
z-index:10;


div.click-to-top img
-webkit-transition: all 0.8s;
moz-transition: all 0.8s;
transition: all 0.8s;
width:130px;


div.click-to-top img:hover
width:140px;
z-index:10;

【问题讨论】：

这个answer 必须是最好的，因为它使用了内置的 html 属性。 【参考方案1】：

您可以将文本包装成&lt;span&gt;&lt;/span&gt; 并在父:hover 上显示

CSS

div.click-to-top span 
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #333;
  color: #fff;


div.click-to-top:hover span 
  display: block;

HTML

<div class="click-to-top">
  <img src="http://lorempicsum.com/futurama/350/200/1"  />
  <span>Tooltip text</span>
</div>

Fiddle

【讨论】：

【参考方案2】：

看看这个代码笔http://codepen.io/mlegg10/pen/reqGMZ

/* `border-box`... ALL THE THINGS! */
html 
  box-sizing: border-box;


*,
*:before,
*:after 
  box-sizing: inherit;


body 
  margin: 64px auto;
  text-align: center;
  font-size: 100%;
  max-width: 640px;
  width: 94%;


a:hover 
  text-decoration: none;


header,
.tooltip,
.tooltip p 
  margin: 4em 0;
  text-align: center;


/**
 * Tooltip Styles
 */

/* Add this attribute to the element that needs a tooltip */
[data-tooltip] 
  position: relative;
  z-index: 2;
  cursor: pointer;


/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after 
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;


/* Position tooltip above the element */
[data-tooltip]:before 
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;


/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after 
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;


/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after 
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;

<div class="tooltip">
    <p><button data-tooltip="I’m the tooltip text.">I’m a button with a tooltip</button></p>
</div>

【讨论】：

使用innerHTML在悬停时显示图像图例（不是工具提示）？

】使用innerHTML在悬停时显示图像图例（不是工具提示）？【英文标题】：Displayimagelegendonhover(notastooltip)usinginnerHTML?【发布时间】：2018-07-0918:04:58【问题描述】：我有一个包含许多图像的网页，每个图像都有一个title属性。当我将... 查看详情

使用css将鼠标悬停在按钮上时如何更改站点背景图像？

】使用css将鼠标悬停在按钮上时如何更改站点背景图像？【英文标题】：HowcanIchangeasitesbackgroundimagewhenhoveringoverabuttonusingcss?【发布时间】：2019-08-2405:26:12【问题描述】：对于一个学校项目，我们需要使用html、css和php制作一个基... 查看详情

鼠标悬停效果工具提示

...有更多文本，那么鼠标和工具提示之间的空间就会很大。如何将所有工具提示添加到相同的空间？我的代码：$(\'.tooltipLink\').hover(function()vartitle=$(this).attr(\'da 查看详情

如何在鼠标悬停时显示工具提示或项目信息？

】如何在鼠标悬停时显示工具提示或项目信息？【英文标题】：howcanIdisplaytooltiporiteminformationonmouseover?【发布时间】：2011-02-2820:08:20【问题描述】：我在一个屏幕上显示5userImage。我想在这些userImage上的mouseover上显示userID和email。... 查看详情

悬停时向 img 标签添加渐变背景

】悬停时向img标签添加渐变背景【英文标题】：addgradientbackgroundtoimgtagwhenhover【发布时间】：2021-02-2313:23:40【问题描述】：我正在将psd文件中的投资组合部分转换为html代码。Thisiswhatportfoliosectionlookslike.我想在悬停时为图像添加渐... 查看详情

如何将图像工具提示添加到 JavaFX 中的 ComboBox 项？

】如何将图像工具提示添加到JavaFX中的ComboBox项？【英文标题】：HowtoaddimagetooltipstoComboBoxitemsinJavaFX?【发布时间】：2016-12-0821:16:23【问题描述】：我想为ComboBox中的每个项目添加一张照片，因此当用户将鼠标悬停在ComboBox中该项目... 查看详情

如何使用css在鼠标悬停时缩放图像？

...标悬停效果。使用JavaScript使用CSS在本文中，我们将看到如何使用CSS来实现这种效果。本文包含两部分代码。第一部分包含HTML代码，第二部分包含CSS代码。HTML代码：在本文中，我们将使用HTML创建悬停效果时图像缩放的基 查看详情

在反应中使用顺风 css 为范围滑块添加自定义工具提示

...间】：2021-10-0821:40:03【问题描述】：enterimagedescriptionhere如何使用tailwaindcss在图像中实现一些类似【问题讨论】：【参考方案1】：<divclassName="relativegroup"> 查看详情

如何在鼠标悬停时自定义 w2ui 网格工具提示

】如何在鼠标悬停时自定义w2ui网格工具提示【英文标题】：howtocustomizew2uigridtooltipinmousehover【发布时间】：2014-04-0906:28:12【问题描述】：我在html页面上使用w2ui网格。我正在获取带有图像路径+单元格鼠标数据的工具提示。我想从... 查看详情

如何使用css在悬停时在图像上显示图像

】如何使用css在悬停时在图像上显示图像【英文标题】：Howtodisplayimageoverimageonhoverwithcss【发布时间】：2013-08-2402:10:20【问题描述】：我有一个带有links的图片库。编辑：这是我必须使用的代码：<divclass="gallerypagetabs"><ahref="... 查看详情

悬停时的jquery图像预览-如何设置固定位置？

】悬停时的jquery图像预览-如何设置固定位置？【英文标题】：jqueryimagepreviewonhover-howtosetfixedposition?【发布时间】：2012-09-2622:25:58【问题描述】：请参考here。无论我翻转什么图像缩略图，我都希望图像预览/工具提示位于相同的位... 查看详情

css3——提示工具图片廓图像透明图像拼接技术媒体类型属性选择器

...响应式图片廓  图像透明创建透明图像——悬停效果———鼠标放置后———> 创建一个具有文本的拥有背景图 查看详情

如何使用 CSS 使文本出现在悬停时的图像顶部

】如何使用CSS使文本出现在悬停时的图像顶部【英文标题】：HowtoGetTextToAppearOnTopofImageOnHoverWithCSS【发布时间】：2017-11-2803:48:22【问题描述】：目前，当您将鼠标悬停在图像上时，不透明度会变浅：https://jsfiddle.net/vo1npqdx/1268/这是... 查看详情

使用jquery在悬停时添加随机图像

】使用jquery在悬停时添加随机图像【英文标题】：Addrandomimageonhoverusingjquery【发布时间】：2021-10-1721:07:27【问题描述】：HTML和CSS很难修改，除了给div加上cla​​ss和ID。那么为什么我要尝试使用JSJquery来处理它。当我将鼠标悬停在... 查看详情

javascriptjquery-在悬停时向div添加一个类(代码片段)

查看详情

CSS样式：悬停时如何更改图像？

】CSS样式：悬停时如何更改图像？【英文标题】：CSSStyling:Howtochangetheimagewhenitishoveredover?【发布时间】：2015-04-2409:50:05【问题描述】：我正在尝试对图像进行悬停效果，当它悬停在图像上时，它将变为另一张图片。当我不使用锚... 查看详情

jquery-在悬停时向div添加类

$('.project').hover(function(){$(this).addClass('hover');},function(){$(this).removeClass('hover');}); 查看详情

如何在图例悬停时显示工具提示？

】如何在图例悬停时显示工具提示？【英文标题】：Howtoshowtooltiponlegendhover?【发布时间】：2021-10-0216:53:32【问题描述】：我在React中使用chart.js。我已阅读并实施：Chart.js-showtooltipwhenhoveringonlegend很遗憾，这并没有提供预期的结果... 查看详情