如何在不使用工具提示的情况下在图像悬停上显示文本？

在图像悬停时显示文本而不使用工具提示

在网页设计中，通常希望当用户将鼠标悬停在图像上时显示附加信息。虽然工具提示是一种流行的解决方案，但它们可能并不总是提供所需的美观或功能。本文探讨了如何使用纯 CSS 或 jQuery 来实现此效果。

使用 CSS：

CSS3 引入了 :hover 伪元素，它允许在鼠标悬停时设置样式在一个元素上。在这种情况下，悬停效果将应用于图像。

HTML:

<div>

CSS:

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

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

此 CSS 将文本标题放置在图像的左下角，并隐藏它，直到鼠标悬停在图像上。

使用 jQuery：

也可以使用jQuery来达到同样的效果。此方法可以为更复杂的场景提供更大的灵活性。

HTML:

与之前相同。

CSS:

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

jQuery:

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

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

此 jQuery 脚本将 mouseover 和 mouseout 事件绑定到图像元素并切换标题的可见性。

无论使用哪种方法，通过利用 CSS 或 jQuery，都可以创建自定义悬停效果，无需使用工具提示即可在图像上显示附加信息。

以上是如何在不使用工具提示的情况下在图像悬停上显示文本？的详细内容。更多信息请关注PHP中文网其他相关文章！