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

鼠标悬停在图像上的文本

用户在尝试在鼠标悬停时在图像上显示文本时经常遇到挑战。传统的工具提示技术可能并不总是符合所需的美观或可访问性要求。本文深入探讨了基于 CSS 和 jQuery 的方法来实现流畅且高效的解决方案。

CSS 方法

利用 CSS3 中 :hover 伪元素的强大功能，我们无需任何 JavaScript 知识即可达到预期效果。 HTML 结构需要一个包含图像和文本的包装 div。 CSS 规则将文本元素定位在图像下方，最初使用visibility:hidden 隐藏。将鼠标悬停在图像上 (class="hover") 时，文本变得可见 (visibility:visible)。

HTML:

<div>
<p><strong>CSS :</strong></p>
<pre class="brush:php;toolbar:false">#wrapper .text {
  position: relative;
  bottom: 30px;
  left: 0px;
  visibility: hidden;
}

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

jQuery方法

对于精通 jQuery 的人来说，还有一种替代方法。在这种方法中，jQuery 控制鼠标悬停和鼠标离开时文本元素的可见性事件。

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">#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");
});

结论

两者CSS 和 jQuery 提供了在图像鼠标悬停时显示文本的可行解决方案。方法的选择取决于个人喜好和技术熟练程度。通过利用这些技术，开发人员可以增强用户体验并创建美观的交互。