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

在图像悬停时显示文本

创建当用户将鼠标悬停在图像上时出现的小框可以通过多种方法来实现。这里有一个全面的指南，可以帮助您实现所需的效果：

CSS3 使用 :hover 伪元素

通过利用 CSS3 中的 :hover 伪元素，您可以在图像悬停。此方法的 HTML 和 CSS 代码如下：

<div>

#wrapper .text {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

#wrapper:hover .text {
  visibility: visible;
}

jQuery

或者，您可以使用 jQuery 来实现相同的结果。以下是 HTML、CSS 和 jQuery 代码：

<div>

#wrapper p {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

$('.hover').mouseover(function() {
  $('.text').css("visibility", "visible");
});

$('.hover').mouseout(function() {
  $('.text').css("visibility", "hidden");
});

此 jQuery 代码将在鼠标悬停在图像上时显示“文本”元素，并在鼠标离开时隐藏它。

自定义盒子

自定义盒子的大小和位置在该框中，您可以调整bottom: 和left: 属性中提供的CSS 值。要删除图像的边框连接，请将以下内容添加到 CSS 中：

#wrapper img {
  border: none;
}

多个图像和标题

如果您有多个图像和标题，则可以为每个图像创建一个包装 div 并在其中包含图像和文本元素。只需复制代码片段中显示的格式并相应地替换图像源和文本即可。

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