如何使用 CSS 更改悬停时的图像

2024-05-15 06:01| 来源: 网络整理| 查看: 265

如何使用 CSS 更改悬停时的图像

主题：HTML / CSS

答案：使用 CSS background-image 属性

您可以简单地将 CSS background-image 属性与 :hover pseudo-class 结合使用来替换或更改鼠标悬停时的图像。

让我们试试下面的例子来了解它的基本工作原理：

示例在 CSS 中悬停时更改图像 .card { width: 130px; height: 195px; background: url("images/card-back.jpg") no-repeat; display: inline-block; } .card:hover { background: url("images/card-front.jpg") no-repeat; }

您还可以将图像组合成 image sprite 以获得平滑的悬停效果。但是，如果您想使用标签实现此效果，您可以使用 CSS positioning method，如下所示：

示例使用 CSS 在悬停时进行图像交换 .card { width: 130px; height: 195px; position: relative; display: inline-block; } .card .img-top { display: none; position: absolute; top: 0; left: 0; z-index: 99; } .card:hover .img-top { display: inline; } FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答：

如何使用 CSS 在鼠标悬停时创建 3D 翻转效果如何在鼠标悬停时转换图像大小而不影响 CSS 中的布局如何使用 CSS 自动调整图像大小以适合 DIV 容器

【本文地址】

公司简介

联系我们