如何使用 HTML 和 CSS 在悬停图像上显示文本？-css教程-PHP中文网

首页

web前端

css教程

如何使用 HTML 和 CSS 在悬停图像上显示文本？

Barbara Streisand

Dec 10, 2024 am 06:13 AM

How to Display Text Over an Image on Hover Using HTML and CSS?

使用 HTML 和 CSS 在悬停时显示文本

为了在悬停时在图像上显示文本，您最初求助于图像精灵基于解决方案。然而，您现在寻求一种使用真实文本的更简洁的方法。

解决方案在于使用 div 元素作为图像和描述的包装器。该 div 应具有与图像相同的尺寸。通过操作 CSS，您可以确定将鼠标悬停在 div 上时描述的可见性。

实现此效果的简化代码片段：

.image-wrapper {
  position: relative;
  height: [Image height];
  width: [Image width];
}

.image-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: [Description background color];
  color: [Description text color];
  visibility: hidden;
  opacity: 0;
  transition: visibility .2s, opacity .2s;
}

.image-wrapper:hover .image-description {
  visibility: visible;
  opacity: 1;
}

在 HTML 中：

<div class="image-wrapper">
  <img src="image.jpg" />
  <p class="image-description">This is the image description.</p>
</div>

以上是如何使用 HTML 和 CSS 在悬停图像上显示文本？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Laravel 教程

1597

PHP教程

1488

显示更多

Related knowledge

CSS教程，用于创建加载旋转器和动画 Jul 07, 2025 am 12:07 AM

创建CSS加载旋转器的方法有三种：1.使用边框的基本旋转器，通过HTML和CSS实现简单动画；2.使用多个点的自定义旋转器，通过不同延迟时间实现跳动效果；3.在按钮中添加旋转器，通过JavaScript切换类来显示加载状态。每种方法都强调了设计细节如颜色、大小、可访问性和性能优化的重要性，以提升用户体验。

解决CSS浏览器兼容性问题和前缀 Jul 07, 2025 am 01:44 AM

处理CSS浏览器兼容性和前缀问题需理解浏览器支持差异并合理使用厂商前缀。1.了解常见问题如Flexbox、Grid支持不一，position:sticky失效，动画表现不同；2.查阅CanIuse确认特性支持情况；3.正确使用-webkit-、-moz-、-ms-、-o-等厂商前缀；4.推荐使用Autoprefixer自动添加前缀；5.安装PostCSS并配置browserslist指定目标浏览器；6.构建时自动处理兼容性；7.老项目可用Modernizr检测特性；8.不必追求所有浏览器一致，确

使用CSS剪辑路径创建自定义形状 Jul 09, 2025 am 01:29 AM

使用CSS的clip-path属性可以裁剪元素为自定义形状，如三角形、圆形缺口、多边形等，无需依赖图片或SVG。其优势包括：1.支持circle、ellipse、polygon等多种基本形状；2.可响应式调整，适配移动端；3.易于动画化，可结合hover或JavaScript实现动态效果；4.不影响布局流，仅裁剪显示区域。常见用法如圆形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意

显示：内联，显示：块和显示：内联块之间有什么区别？ Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizontalpadding/margins—idealforinlinetextstyling

造型与CSS不同访问的链接 Jul 11, 2025 am 03:26 AM

设置访问过链接的样式能提升用户体验，尤其在内容密集型网站中帮助用户更好导航。1.使用CSS的:visited伪类可定义已访问链接样式，如颜色变化；2.注意浏览器出于隐私限制仅允许修改部分属性；3.颜色选择应与整体风格协调，避免突兀；4.移动端可能不显示该效果，建议结合其他视觉提示如icon辅助标识。

如何使用CSS创建响应式图像？ Jul 15, 2025 am 01:10 AM

要使用CSS创建响应式图片，主要可通过以下方法实现：1.使用max-width:100%和height:auto让图片在保持比例的同时自适应容器宽度；2.结合HTML的srcset和sizes属性智能加载适配不同屏幕的图片源；3.利用object-fit和object-position控制图片裁剪与焦点展示。这些方法共同确保图片在不同设备上清晰、美观地呈现。

什么是常见的CSS浏览器不一致？ Jul 26, 2025 am 07:04 AM

不同浏览器对CSS解析存在差异，导致显示效果不一致，主要包括默认样式差异、盒模型计算方式、Flexbox和Grid布局支持程度及某些CSS属性行为不一致。1.默认样式处理不一致，解决方法是使用CSSReset或Normalize.css统一初始样式；2.旧版IE的盒模型计算方式不同，建议统一使用box-sizing:border-box；3.Flexbox和Grid在边缘情况或旧版本中表现有差异，应多测试并使用Autoprefixer；4.某些CSS属性行为不一致，需查阅CanIuse并提供降级

揭开CSS单元的神秘面纱：PX，EM，REM，VW，VH比较 Jul 08, 2025 am 02:16 AM

CSS单位的选择取决于设计需求和响应式要求。1.px用于固定尺寸，适合精确控制但缺乏弹性；2.em是相对单位，受父元素影响易导致级联问题，rem则基于根元素更稳定，适合全局缩放；3.vw/vh基于视口大小，适合响应式设计，但需注意极端屏幕下的表现；4.选择时应根据是否需要响应式调整、元素层级关系及视口依赖程度来决定，合理搭配使用可提升布局灵活性与维护性。

See all articles

如何使用 HTML 和 CSS 在悬停图像上显示文本？

热AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题